jQuery图片百叶窗js特效代码_jQuery图片手风琴效果

转载于 2021-12-29 20:51:05 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/11709

文章标签：

#jquery #javascript #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这段代码展示了如何使用JavaScript为项目中的百叶窗元素实现交互式动画，当鼠标进入或离开时，根据当前选中的li位置调整相邻li的移动方向并控制遮罩的显示。

下载地址

企业项目百叶窗的简化var $lis = $(".shutter li"); //监听是给所有的li，碰到所有li的时候都有事情发生 $lis.mouseenter(function(){ $lis.stop(true); //得到碰到的这个li的编号，$(this)表示触发事件的li标签 var index = $(this).index(); //要让每个li有不同的运动终点，所以就要有each这个东西遍历每个li //只有each能提供i变量 $lis.each(function(i){ //里面的$(this)指的是遍历到的li元素 if(i<= index){ //小于等于触碰的li序号的li，就要往左边移动 $(this).animate({"left" : 60 * i},500); }else{ //大于触碰的li序号的li，就要往右边移动 $(this).animate({"left" : 560 + 60 * (i - 1)},500); } }); //变亮业务，碰到的这个li的子.mask变亮 $(this).children(".mask").stop(true).fadeOut(); }); //离开每个li的时候 $lis.mouseleave(function(){ //离开的时候自己的子mask淡入，淡入到0.6 $(this).children(".mask").fadeIn(); $lis.each(function(i){ $(this).animate({"left" : 160 * i},500); }) })