首页 > 图片特效 / jquery特效插件 / 站长常用 / > 水平百叶窗手风琴切换滚动鼠标滑过图片水平切换

水平百叶窗手风琴切换滚动鼠标滑过图片水平切换

点击: 6211 , 发布日期: 2011-9-20
水平百叶窗手风琴切换滚动鼠标滑过图片水平切换

水平百叶窗手风琴切换滚动鼠标滑过图片水平切换

 水平百叶窗手风琴切换滚动鼠标滑过图片水平切换,滑动切换时有抖动的情况,可以数量是要根据实现作好的图片来确定的,使用会比较麻烦,数量大小一变css与jquery相应的数据也要变化。

jquery代码如下:

<script type="text/javascript">
//ACC
$(function(){
	var index=0;
	$("dl.ac dt").eq(index).css("width","620px");
	$("dl.ac dd").eq(index).css("backgroundPosition",(-35)*index+"px -340px");
	$("dl.ac dd").mouseover(function(){
		if($("dl.ac dt").eq(index).css("width")!="620px")return false;
		i=$("dl.ac dd").index(this);
		if(i==index)return false;
		$("dl.ac dd").eq(index).css("backgroundPosition",(-35)*index+"px 0px");
		$(this).css("backgroundPosition",(-35)*i+"px -340px");
		$("dl.ac dt").eq(index).animate({width:0},200); 
		$(this).next().animate({width:620},200); 
		index=i;
	});
	
	/*MyTime =setInterval(function(){
		$("dl.ac dd").eq(index).trigger("mouseover");
	 }, 100);*/
	 
});

</script>

 

关键词: jquery+css

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论
没积分怎么下载
koom
2015-12-15 18:12:11
一直在找这效果,值得学习
Adirn
2015-4-24 13:13:57
nice
码农在Coding
2014-12-20 20:31:16
好东西~很可爱~
FY-20001
2014-11-17 23:15:06
效果值得借鉴,学习
黄艳刚
2014-9-22 15:56:29