jQuery如何实现手风琴效果

这篇文章主要介绍了jQuery如何实现手风琴效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联2013年开创至今,先为肃南裕固族自治等服务建站,肃南裕固族自治等地企业,进行企业商务咨询服务。为肃南裕固族自治企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

jQuery如何实现手风琴效果

代码:




 
 Document
 
  *{
   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);
  }
 


 
  
            
                 
                 
                 
                                      // 所有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();   });  

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery如何实现手风琴效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前标题:jQuery如何实现手风琴效果
文章链接:http://ybzwz.com/article/geepoh.html