jQuery实现手风琴效果(蒙版)


Posted in jQuery onJanuary 11, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现图片平滑滚动详解
Mar 22 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
You might like
1 Tube Radio
2021/03/02 无线电
香妃
2021/03/03 冲泡冲煮
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
大学生推广普通话演讲稿
2014/09/21 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
Python中re模块的元字符使用小结
2022/04/07 Python