鼠标悬停经过滑过图片展开滑动jQuery特效代码

创客云

代码结构

  1. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  2. <div class="wamp">
  3.     <div class="box_w">
  4.         <dl>
  5.             <dt><a><img src="img/1.jpg"/></a></dt>
  6.             <dd><a><img src="img/6.jpg"/></a></dd>
  7.         </dl>
  8.         <dl>
  9.             <dt><a><img src="img/2.jpg"/></a></dt>
  10.             <dd><a><img src="img/7.jpg"/></a></dd>
  11.         </dl>
  12.         <dl>
  13.             <dt><a><img src="img/3.jpg"/></a></dt>
  14.             <dd><a><img src="img/9.jpg"/></a></dd>
  15.         </dl>
  16.         <dl>
  17.             <dt><a><img src="img/4.jpg"/></a></dt>
  18.             <dd><a><img src="img/8.jpg"/></a></dd>
  19.         </dl>
  20.     </div>
  21. </div>
  22. <script type="text/javascript">
  23.     $(function(){
  24.         $('.box_w dl').mouseover(function(){
  25.             var aa=$(this).index();
  26.             var aac=-aa*250
  27.             $(this).parent('.box_w').stop().animate({left:aac},600)
  28.             $(this).stop().animate({width:"1000px"},600).siblings('dl').stop().animate({width:"250px"},600);
  29.         })
  30.         $('.box_w dl').mouseout(function(){
  31.             $(this).parent('.box_w').stop().animate({left:"0px"},600)
  32.             $(this).stop().animate({width:"250px"},600)
  33.         })
  34.     })
  35. </script>
  36. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  37. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60086.html
云模板

发表评论