<!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;

         }

         a{

             text-decoration: none;

             color:#333;

         }

         .box{

             width: 900px;

             height: 300px;

             border: 1px solid #000;

             margin: 50px auto;

             overflow: hidden;

             position: relative;

         }

         .box ul li{

             position: absolute;

             left:0px;

             width: 560px;

             height: 300px;

         }

         .box ul li.no1{

             left:180px;

         }

         .box ul li.no2{

             left:360px;

         }

         .box ul li.no3{

             left:540px;

         }

         .box ul li.no4{

             left:720px;

         }

         .box ul li .mask{

             position: absolute;

             width: 560px;

             height: 300px;

             left:0;

             top:0;

             background-color: rgba(0,0,0,.6);

         }

     </style>

 </head>

 <body>

     <div class="box">

         <ul>

             <li class="no0">

                 <div class="mask"></div>

                 <a href=""><img src="data:images/0.jpg" alt=""></a>

             </li>

             <li class="no1">

                 <div class="mask"></div>

                 <a href=""><img src="data:images/1.jpg" alt=""></a>

             </li>

             <li class="no2">

                 <div class="mask"></div>

                 <a href=""><img src="data:images/2.jpg" alt=""></a>

             </li>

             <li class="no3">

                 <div class="mask"></div>

                 <a href=""><img src="data:images/3.jpg" alt=""></a>

             </li>

             <li class="no4">

                 <div class="mask"></div>

                 <a href=""><img src="data:images/4.jpg" alt=""></a>

             </li>

         </ul>

     </div>

     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

     <script type="text/javascript">

         $("li").mouseenter(function(){

             // 将触发事件的对象序号保存

             var idx = $(this).index();

             // 小于等于序号往左移动85

             $("li:lt(" + (idx + 1) + ")").each(function(i){

                 $(this).animate({"left": 85 * i},400);

             });

             // 大于信号序号往右移动

             $("li:gt(" + idx + ")").each(function(i){

                 // console.log(i);

                 $(this).animate({"left": 560 + 85 * (idx + i)},400);

             });

             // 鼠标进入图片去掉蒙版

             $(this).children(".mask").fadeOut();

             // 其他兄弟加上蒙版

             $(this).siblings().children(".mask").fadeIn();

         });

         // 鼠标离开恢复原状

         $(".box").mouseleave(function(){

             $("li").stop(true);

             $("li").each(function(i){

                 // console.log(i);

                 $(this).animate({"left": 180 * i},400);

             });

             $("li").children(".mask").fadeIn();

         });

     </script>

 </body>

 </html>

jq手风琴效果的更多相关文章

  1. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  2. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  5. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  6. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  7. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  8. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  9. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

随机推荐

  1. python自动化--文件处理

    文件处理 格式 打开 f=open('a.txt',mode='r',encoding='utf-8') 读写 data=f.read() print(data) 关闭 f.close() 流程分析: ...

  2. Linux Centos安装及卸载Apache

    一.卸载 1.查看有没有安装apache,出现下面信息则安装过 [root@localhost ~]# rpm -qa|grep httpd httpd-2.2.15-53.el6.centos.x8 ...

  3. iOS手势之pinch

    今天用地图的时候有用到pinch 捏合手势 通过捏合手势动作可以很轻松的来改变视图元素的一个比例 手势的动作状态有如下三种,一般是按照顺序来进行转换的. 1. UIGestureRecognizerS ...

  4. django2.0+linux服务器 ，如何让自己电脑访问

    这几天一直在搞这个服务器端口开放问题,来让自己电脑可以访问服务器下的django网页,今天终于弄好了~~~~~离成功又进了一步~~~~~ 1.首先,我们来开放一个linux服务器的端口(我开放了828 ...

  5. iOS 环信集成项目应用

    环信iOS端3.0版本集成记录--聊天界面篇 环信离线推送证书... 1,环信处在后台的时候,消息的接收与推送 离线发推送 配置属性 EMCallOptions *options = [[EMClie ...

  6. SQL Server 数据库引擎怎样记录完整备份后修改过的数据

    SQL Server 使用两个内部数据结构跟踪被大容量复制操作修改的区,以及自上次完整备份后修改的区.这些数据结构极大地加快了差异备份的速度.当数据库使用大容量日志恢复模式时,这些数据结构也可以加快将 ...

  7. 【Zookeeper】源码分析之Leader选举（一）

    一.前言 分析完了Zookeeper中的网络机制后,接着来分析Zookeeper中一个更为核心的模块,Leader选举. 二.总结框架图 对于Leader选举,其总体框架图如下图所示 说明: 选举的父 ...

  8. 小白的Python之路 day4 生成器

    一.列表生成式  看下面例子: 列表生成式的作用:主要是让代码更简洁(还有装X的效果) 二.生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包 ...

  9. IntelliJ IDEA如何设置头注释，自定义author和date

    下面这张图,保证你一看就会: 下面这个模板,你拿去改一改就行了. /** * @Author: Gosin * @Date: ${DATE} ${TIME} */ 如果觉得上面名字下面的波浪线碍眼,可 ...

  10. CSS篇（上）

    紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型      W3C盒子模型 2>盒模型:内 ...