jQuery滑动-随想飞翔

jQuery滑动

Update:之前的效率问题是我写错了代码……注释写的没错，绑定“鼠标进入”（mouseOVER）事件，可我的代码写的是mouseMOVE（鼠标移动）事件，导致每移动1像素鼠标都会重复调用过程，所以造成严重的事件排队……

演示已更新。

演示：http://labs.cloudream.name/jquery/move.html

~~此文不仅仅是展示点代码，也展示个jQuery的问题，部分函数效率低下到可以算是bug……~~

效果看上去还不错，是吧？呵呵。代码超级简单哦。

//等待文档完成加载
$(document).ready(function(){

//为颜色div赋默认宽度值(第一个span块)
	$("div").width($("span").width());

//例遍所有span,以下$(this)均为各span块
	$("span").each(function(){

//绑定鼠标进入事件
		$(this).mouseover(function(){

//div颜色块使用动画效果,{}内为最终效果,速度为slow(也可以设置完成毫秒数)
			$("div").animate({

//宽度设置为当前span宽度
					width: $(this).width(),

//左边距设置为当前span的网页x坐标
					marginLeft: $(this).offset().left
				}
//显示速度
				,"slow"
			);
			
		});
	});

});

[ 可以先修改再运行 ]

很简单，很优雅，对吧？

~~等jQuery官方修正效率问题吧，囧。~~

随想飞翔

邪恶获得胜利的唯一条件，就是善良的人们保持沉默。

导航

2007-11-1 18:3:27 | 字号:大 中 小

jQuery滑动

Tags: jQuery

发布:分类:网站的事 | 评论:0 | 引用:0 | 浏览: | 字号:大 中 小

网站目录

站内搜索

实用搜索

最近发表

Powered By Z-Blog | Z-Blog Plus 1.5 Final Beta

Copyright 明月星光(Cloudream). Some Rights Reserved. 转载请在明显位置链接本站

随想飞翔

邪恶获得胜利的唯一条件，就是善良的人们保持沉默。

导航

2007-11-1 18:3:27 | 字号:大 中 小

jQuery滑动

Tags: jQuery

发布:分类:网站的事 | 评论:0 | 引用:0 | 浏览: | 字号:大 中 小

网站目录

站内搜索

实用搜索

最近发表

Powered By Z-Blog | Z-Blog Plus 1.5 Final Beta

Copyright 明月星光(Cloudream). Some Rights Reserved. 转载请在明显位置链接本站 <a href="http://www.51.la/?452522" target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/452522.asp" style="border:none" /></a>

2007-11-1 18:3:27 | 字号:大中小

发布:分类:网站的事 | 评论:0 | 引用:0 | 浏览: | 字号:大中小

Copyright 明月星光(Cloudream). Some Rights Reserved. 转载请在明显位置链接本站