jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704 -

xjwolaile

浏览: 340447 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704

博客分类：

学习
前端技术
jQuery

setTimeout find each animate clearTimeout

1、效果及功能说明
右侧边固定层导航菜单，鼠标滑过浮动层导航菜单依次动画滑动显示菜单内容展开，鼠标离开后菜单收缩

2、实现原理

展开是通过计算鼠标触及装有a标签的div开始从0号a标签开始展开每个展开是0.2秒每一个之间的这个效果不轮用户是从上面触及还是从下面触及都是从上面的0号开始展开到最后的
间隔是50*200 每个全部展开的时间是0.3秒

回收也是鼠标只要移动开会从最上面的a标签开始回收到最后

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(没有图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#DCDCDC;}
/* rightNav */
.rightNav{position:fixed;top:0;right:0;z-index:9999;width:140px;cursor:pointer;margin:100px 0 0 0;}
*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
*html .rightNav{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.rightNav a{display:block;position:relative;height:30px;line-height:30px;margin-bottom:2px;background:#fff;padding-right:10px;width:130px;overflow:hidden;cursor:pointer;right:-110px;}
.rightNav a:hover{text-decoration:none;color:#1974A1;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block;float:left;width:30px;background:#1974A1;color:#fff;font-size:16px;text-align:center;margin-right:10px;font-style:normal;}
</style>

</head>
<body>
<!-- 右侧导航 -->
<div class="rightNav">
	<a href="http://www.17sucai.com/"><em>0</em>站长素材</a>
	<a href="http://www.17sucai.com/"><em>1</em>书签切换</a>
	<a href="http://www.17sucai.com/"><em>2</em>幻灯片</a>
	<a href="http://www.17sucai.com/"><em>3</em>图片滚动-左</a>
	<a href="http://www.17sucai.com/"><em>4</em>图片滚动-上</a>
	<a href="http://www.17sucai.com/"><em>5</em>图片无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>6</em>图片无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>7</em>文字滚动-左</a>
	<a href="http://www.17sucai.com/"><em>8</em>文字滚动-上</a>
	<a href="http://www.17sucai.com/"><em>9</em>文字无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>10</em>文字无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
var btb=$(".rightNav");
//将整个导航的div放进进btb
var tempS;
//定义参数
$(".rightNav").hover(function(){
//定义个伪类
	var thisObj = $(this);
	//定义参数
	tempS = setTimeout(function(){
	//setTimeout指定的毫秒数后调用函数或计算表达式
		thisObj.find("a").each(function(i){
		//通过each方法就可以匹配到每一个a标签
			var tA=$(this);
			//定义参数
			setTimeout(function(){
			//定义指定的毫秒数后调用函数或计算表达式
				tA.animate({right:"0"},300);
				//调整当鼠标触及到任意的a标签上所有的标签都会在0.3秒展开
			},50*i);
			//定义当第一个展开以后，后面的结果多久才展开0.05*200
		});
	},200);
	//当鼠标触到a标签以后花多少时间展开第一个
},function(){
//在jquery定义方法
	if(tempS){
	//判断tempS
		clearTimeout(tempS);
		//clearTimeout方法可取消由 setTimeout() 方法
	}
	$(this).find("a").each(function(i){
	//通过each方法就可以匹配到每一个a标签
		var tA=$(this);
		//定义参数
		setTimeout(function(){
		//定义指定的毫秒数后调用函数或计算表达式
			tA.animate({right:"-110"},300,function(){
			//调整当鼠标离开所有的a标签，标签都会在0.3秒回缩，回缩多少-110
			});
		},50*i);
		//定义当第一个展开以后，后面的结果多久才展开0.05*200
	});
});
</script>

<div style="height:1000px;"></div>

</body>
</html>

查看图片附件

分享到：

jQuery左侧列表导航条鼠标滑过flash动画导 ... | jQuery侧面浮动图片广告或滚屏图片广告-2 ...

2013-07-04 23:35
浏览 6303
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>