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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python语言快速上手学习方法
2018/12/14 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
员工自我鉴定
2013/10/09 职场文书
大学生自荐书范文
2013/12/10 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis