微客导航 » 文章资讯 » jQuery实现手风琴效果（蒙版）

jQuery实现手风琴效果（蒙版）

2023-08-03 06:05:04 152

本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下

代码：





Document

*{
padding:0;
margin:0;
}
ul,ol{
list-style:none;
}
.box{
width:900px;
height:300px;
border:1pxsolid#333;
margin:50pxauto;
position:relative;
overflow:hidden;
}
.boxulli{
position:absolute;
width:560px;
height:300px;
top:0px;
}
.boxulli.no0{
left:0px;
}
.boxulli.no1{
left:180px;
}
.boxulli.no2{
left:360px;
}
.boxulli.no3{
left:540px;
}
.boxulli.no4{
left:720px;
}
/*蒙版效果*/
.mask{
position:absolute;
width:560px;
height:300px;
top:0;
left:0;
background-color:rgba(0,0,0,.5);
}

//所有li添加鼠标进入事件 $("li").mouseenter(function(){ //将鼠标进入的li序号提前保存 varidx=$(this).index(); //图片序号小于idx往左移动85*i。 $("li:lt("+(idx+1)+")").each(function(i){ //each中i表示遍历到对象的序号。 //console.log(i); $(this).stop(true).animate({"left":85*i},300); }); //图片序号大于idx往右移动 $("li:gt("+idx+")").each(function(i){ //console.log(i); $(this).stop(true).animate({"left":560+85*(idx+i)},300); }); //鼠标悬停的li变高亮 $(this).children(".mask").stop(true).fadeOut(); //排他 $(this).siblings().children(".mask").stop(true).fadeIn(); }); //鼠标离开恢复状态 $(".box").mouseleave(function(){ //所有li恢复180位置 $("li").each(function(i){ //console.log(i) $(this).stop(true).animate({"left":180*i},300); }); //加上蒙版 $("li").children(".mask").stop(true).fadeIn(); });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现手风琴效果（蒙版）

热门推荐

随机推荐