• 0712-2888027 189-8648-0214
    微信公眾號

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

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

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

    時間:2024-03-28來源:風信官網 點擊: 443次

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

    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区