网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页制作
>
js教程
> >
【漂亮女局长】超漂亮js 滑动下拉菜单效果代码
【漂亮女局长】超漂亮js 滑动下拉菜单效果代码
发布时间:2017-12-16
【www.gdgbn.com--js教程】
提示:您可以先修改部分代码再运行
JavaScript Dropdown Menu Demo
<script language="javascript"> var DDSPEED = 10; var DDTIMER = 15; // main function to handle the mouse events // function ddMenu(id,d){ var h = document.getElementById(id + "-ddheader"); var c = document.getElementById(id + "-ddcontent"); clearInterval(c.timer); if(d == 1){ clearTimeout(h.timer); if(c.maxh && c.maxh <= c.offsetHeight){return} else if(!c.maxh){ c.style.display = "block"; c.style.height = "auto"; c.maxh = c.offsetHeight; c.style.height = "0px"; } c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); }else{ h.timer = setTimeout(function(){ddCollapse(c)},50); } } // collapse the menu // function ddCollapse(c){ c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER); } // cancel the collapse if a user rolls over the dropdown // function cancelHide(id){ var h = document.getElementById(id + "-ddheader"); var c = document.getElementById(id + "-ddcontent"); clearTimeout(h.timer); clearInterval(c.timer); if(c.offsetHeight < c.maxh){ c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER); } } // incrementally expand/contract the dropdown and change the opacity // function ddSlide(c,d){ var currh = c.offsetHeight; var dist; if(d == 1){ dist = (Math.round((c.maxh - currh) / DDSPEED)); }else{ dist = (Math.round(currh / DDSPEED)); } if(dist <= 1 && d == 1){ dist = 1; } c.style.height = currh + (dist * d) + "px"; c.style.opacity = currh / c.maxh; c.style.filter = "alpha(opacity=" + (currh * 100 / c.maxh) + ")"; if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){ clearInterval(c.timer); } } </script>
One
中国WEB第一站 Navigation Item 2 Navigation Item 3 Navigation Item 4 Navigation Item 5
Two
Navigation Item 1 Navigation Item 2 Navigation Item 3 中国WEB第一站 Navigation Item 5
Two
Navigation Item 1 Navigation Item 2 Navigation Item 3 Navigation Item 4 Navigation Item 5
Two
中国WEB第一站 Navigation Item 2 Navigation Item 3 Navigation Item 4 Navigation Item 5
Two
Navigation Item 1 中国WEB第一站 Navigation Item 3 Navigation Item 4 Navigation Item 5
Two
Navigation Item 1 Navigation Item 2 Navigation Item 3 Navigation Item 4 Navigation Item 5
Two
Navigat Naviga Navigati Navigat Navigatio
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyezhizuo/20624/
上一篇:
[js用户名与密码验证码]js用户名与密码验证程序
下一篇:
[json]js 弹出新窗口
相关推荐
【javascript学习指南】javascript autocomplate自动提示代码
[js用户名与密码验证码]js用户名与密码验证程序
广东电信网上营业厅_广东电信发公告称网络瘫痪为路由器故障所致
[phpstudy]php 网站同IP查询代码
ps照片换底色_PS简单给照片换衣服制作教程
【ajax提交form表单】ajax 无刷新创建与发送显示代码
flash player_flash as 怎样写按 传址 方式传参数的方法
【谷歌出现问题】谷歌出现最严重网站瘫痪“事故”
【ps水墨画效果怎么做】如何ps水墨画效果
联想ceo柳传志_联想前CEO获巨额补贴 杨元庆年薪720万美元
网友关注
【sql server】SQL Server 2008 R2新特性:主数据管理
[ps火焰字制作步骤全程]利用ps火焰字制作简单教程
电信客服_电信将关停超信、UNIJA业务
【js判断字符串是否包含某个字符串】JSP 怎么提高数据库访问效率
【phpstudy】php 获取来路页面分析函数
域名查询|域名产业极速升温 融入企业经济发展战略
【ps证件照换底色】PS颓废非主流文字效果教程
利用photoshop制作艺术字_利用photoshop制作艺术签名图片
【利用ps制作漂亮3d字体效果图】利用ps制作漂亮3D字体效果教程
【设计签名免费艺术签名】艺术签名-ps非主流签名制作
热门标签
漂亮的她
干得漂亮
最新js教程
js教程
js遍历对象_js中查找对象代码
js教程
javascript学习指南_java 自动装箱拆箱实现方法
js教程
eclipse连接mysql数据库_java连接db2数据代码
js教程
flash player|flash js Fusioncharts 参数详解与参考
js教程
json_js ajax XMLHttpRequest与jq $.ajax
js教程
【js利用cookie】js利用cookies与正则设置字体高亮显示
js教程
asp.net core_asp.net DataGridTree 下拉树 实现方法
js教程
[jsp注册页面代码]JSP页面编码问题分析
js教程
[hibernate和mybatis的区别]Hibernate 中get()和load()与Hibernate简介
js教程
判断textarea中是否有回车符|判断textarea中是否有回车符方法
js教程热门文章
js教程
[json]js 弹出新窗口
js教程
json_js 根据日期显示星期
js教程
[js div显示隐藏]js+div 自适应宽度的标签导航
js教程
【javascript学习指南】Java 开发中常见的异常问题
js教程
【javascript学习指南】Java 23种设计模式
js教程
[asp.net]asp 通用UBB代码转换程序
js教程
【ajax post提交数据】ajax创建与数据请求代码
js教程
[js动态生成表格]js动态增加表格
js教程
[json]js 判断一个多选对象是否有被选中
js教程
js设置cookie获取cookie值及删除cookie_js设置cookie,获取cookie值及删除cookie值代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有