图片/图形

鼠标悬停经过滑过图片展开滑动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>
也想出现在这里?联系我们
创客主机

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

已有 298 人购买
  • 3n1o
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!