1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網絡科技有限公司微信公眾號

      當前位置:主頁 > 技術支持 > Javascript/JQuery > jquery鼠標懸停圖片平滑放大效果

      jquery鼠標懸停圖片平滑放大效果

      時間:2024-07-10來源:風信官網 點擊: 559次

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>無標題文檔</title>
      <style>
      .hover{ background:#666666;}
      .picShow{margin:0px auto;width:700px; height:200px;margin-top:100px; position:relative;}
      .picShow ul li img{width:159px; height:195px;-ms-interpolation-mode: bicubic;}
      ul{margin:0; padding:0;}
      ul li{ list-style:none; margin:0; padding:0; float:left; position:relative;}
      </style>
      <script src="http://www.dopic.net/../jquery-1.4.2.min.js"></script>
      <script language="javascript">
      $(function(){
      $("ul li").hover(function(){
      $(this).css({'z-index' : '10'});
      $(this).find("img").addClass("hover").stop()
      .animate({
      marginTop: '-110px',
      marginLeft: '-110px',
      top: '20%',
      left: '60%',
      width: "259px",
      height: '295px',
      padding: '20px' ,
      position:'absolute'
      },200);
      },function(){
      $(this).css({'z-index' : '0'});
      $(this).find('img').removeClass("hover").stop()
      .animate({
      marginTop: '0',
      marginLeft: '0',
      top: '0',
      left: '0',
      width: '159px',
      height: '195px',
      padding: '0px'
      }, 400);

      });

      });
      </script>
      </head>

      <body>
      <div class="picShow">
      <ul>
      <li><img src="http://www.dopic.net/1.jpg" /></li>
      <li><img src="http://www.dopic.net/2.jpg" /></li>
      <li><img src="http://www.dopic.net/3.jpg" /></li>
      <li><img src="http:/www.dopic.net/4.jpg" /></li>
      </ul>
      </div>
      </body>
      </html>

      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片