jquery鼠标悬停显示二维码特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标悬停显示二维码特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
    <title>jquery鼠标悬停显示二维码特效</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="case.css" />
    <!--内容部分-->
    <div class="main clearfix">
        <div class="mod_fr1">
            <div class="cust_tle">微房产</div>
            <div class="modlist">
                <ul class="modpic">
                    <li><a href="javascript:;" class="modmore"><img src="images/02e322e45e97a11820c7ae.png" alt="21世纪不动产" /><span><p>21世纪不动产</p><img src="images/7371f509deff7bb13b3c51.jpg" alt="21世纪不动产" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/80c955a07cb5cb43ed77bf.png" alt="绿地曼哈顿" /><span><p>绿地曼哈顿</p><img src="images/5bf557a03e5c7e1d116c84.jpg" alt="绿地曼哈顿" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/5d299e9b763e89e667b8ab.png" alt="诺亚新天地" /><span><p>诺亚新天地</p><img src="images/f3e421ab74baec501d2461.jpg" alt="诺亚新天地" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/2bbcf0008f69816839d837.png" alt="象屿地产" /><span><p>象屿地产</p><img src="images/1d2755672813bcad0562e9.jpg" alt="象屿地产" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/9d1befff848e0fb6be5b98.png" alt="星光耀" /><span><p>星光耀</p><img src="images/a87006767c987324fe7846.jpg" alt="星光耀" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/5f2aa06124d4db8bfbe5b7.png" alt="印象江南" /><span><p>印象江南</p><img src="images/ed586244e8e1f479f7b862.jpg" alt="印象江南" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/0f32d337b9fb5ccc3f1266.png" alt="五洲国际" /><span><p>五洲国际</p><img src="images/c84f5eef19fdca8de443ea.jpg" alt="五洲国际" /></span></a></li>
                    <li><a href="javascript:;" class="modmore"><img src="images/6d18af58215da100140f7a.png" alt="山水年华" /><span><p>山水年华</p><img src="images/e6f2b6883e748561ed4695.jpg" alt="山水年华" /></span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--底部部分-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(".modmore").hover(function () {
            $(this).find("span").stop().animate({ top: '100px' }, 200);
        }, function () {
            $(this).find("span").stop().animate({ top: '260px' }, 200);
        })
    </script>
</body>
</html>

CSS代码(case.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
a,img{border:0;}
body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53;color:#666;}
a{text-decoration:none;color:#333;}
/*客户案例中心*/
.cust_tle{display:block;line-height:60px;padding-left:25px;font-size:24px;color:#f60;border-bottom:1px solid #f1f1f6;}
.cust_tle>span a{display:block;float:right;font-size:14px;color:#666;margin-right:20px;}
.cust_tle>span a:hover{color:#f60;}
.cust_tle>p{font-size:16px;color:#666;margin:20px 20px 20px 0;line-height:25px;}
.main{display:block;width:1180px;margin:0 auto;}
.mod_banner{display:block;min-width:1100px;height:290px;background:url(images/pdt_banner01.jpg) no-repeat center center;overflow:hidden;margin:0 auto;}
.modbox{display:block;position:absolute;top:75px;right:0px;width:440px;height:140px;padding:30px 60px 0 30px;overflow:hidden;}
.modbox>h1{display:block;width:520px;margin-bottom:10px;font-size:28px;color:#f90;}
.modbox>p{line-height:18px;font-size:14px;color:#666;}
.mod_fl{display:block;float:left;width:145px;margin-right:5px;overflow:hidden;}
.mod_fr{display:block;float:right;width:948px;border:1px solid #ebebeb;}
.modtle{display:block;line-height:40px;margin-bottom:5px;margin-top:10px;text-align:center;font-size:14px;color:#333;background:#f4f4f4;}
.modtle:hover{background:#666;color:#fff;}
.modnav{display:block;position:relative;width:150px;}
.modnav li{display:block;float:left;width:70px;height:40px;margin-bottom:5px;margin-right:5px;}
.modnav li a{display:block;text-align:center;line-height:40px;background:#f4f4f4;font-size:14px;color:#333;}
.modnav li a:hover{background:#666;color:#fff;}
.modlist{display:block;padding:25px 0 25px 25px;min-height:600px;}
.modpic li{display:block;float:left;width:200px;height:300px;border:1px solid #e7e7e7;margin:0 27px 25px 0;}
.modpic li a{display:block;position:relative;width:200px;height:300px;overflow:hidden;}
.modpic li a span{display:block;position:absolute;left:0px;top:260px;width:200px;height:200px;background-color:#FFF;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;text-align:center;font-size:14px;color:#666;}
.modpic li a span p{line-height:40px;}

附件:下载该文件资源,减少时间成本(增值服务)