jQuery实现手风琴效果（蒙版）
更新时间：2020年01月11日 10:59:53 作者：赵羽珩
这篇文章主要介绍了jQuery实现手风琴效果，附带蒙版特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
.box{
width: 900px;
height: 300px;
border:1px solid #333;
margin:50px auto;
position: relative;
overflow: hidden;
}
.box ul li{
position: absolute;
width: 560px;
height: 300px;
top:0px;
}
.box ul li.no0{
left:0px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
/*蒙版效果*/
.mask{
position: absolute;
width: 560px;
height: 300px;
top:0;
left: 0;
background-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li class="no0">
<div class="mask"></div>
<a href=""><img src=" images/0.jpg" alt=""></a>
</li>
<li class="no1">
<div class="mask"></div>
<a href=""><img src=" images/1.jpg" alt=""></a>
</li>
<li class="no2">
<div class="mask"></div>
<a href=""><img src=" images/2.jpg" alt=""></a>
</li>
<li class="no3">
<div class="mask"></div>
<a href=""><img src=" images/3.jpg" alt=""></a>
</li>
<li class="no4">
<div class="mask"></div>
<a href=""><img src=" images/4.jpg" alt=""></a>
</li>
</ul>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
// 所有li添加鼠标进入事件
$("li").mouseenter(function(){
// 将鼠标进入的li序号提前保存
var idx = $(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();
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
这篇文章主要介绍了JavaScript自动生成 年月范围 选择功能,结合完整实例形式分析了基于jQuery插件的日期年月范围自动生成与选择功能相关实现技巧,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了jQuery选择器之属性过滤选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本篇文章主要介绍了jQuery中layer分页器的使用，实例介绍了layer分页器的技巧，非常具有实用价值，需要的朋友可以参考下。2017-03-03
今天给大家分享一个基于jquery实现的简单验证码功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-06
下面小编就为大家带来一篇使用JQuery 加载页面时调用JS的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文给大家分享一款简单但实用的多级垂直手风琴下拉菜单列表，完全使用css来制作多级手风琴菜单，通过该代码将不同的子菜单进行分组制作出多级菜单的效果，本文附效果演示和源码下载感兴趣的朋友一起学习吧2015-11-11
这篇文章主要为大家详细介绍了使用jquery Ajax实现上传附件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家详细介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感兴趣的小伙伴们可以参考一下2016-05-05
本实例使用jquery操作div的CSS实现了可隐藏重现的靠边悬浮层，具体实现代码如下，感兴趣的朋友可以参考下哈2013-05-05
这篇文章主要介绍了jQuery学习笔记之创建DOM元素的相关资料,需要的朋友可以参考下2015-01-01
最新评论