JQuery特效之心形图片墙

效果如图：

 

代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
<style type="text/css">
*{padding:0; margin:0;}
ul,li{list-style:none;}
body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}
.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}
.heartPic ul{float:left;width:749px;}
.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
.heartPic ul li.on{z-index:99;}
.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}
.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
.heartPic .showDiv{display:block;}
</style>
</head>
<body>
<div class="heartPic">
    <ul>
        <li></li>
        <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">可爱的女娃娃</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">呆萌的小熊</p>
            </div>
        </li>
    <li></li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">卡哇伊的小熊</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">女巫骑着扫帚</p>
            </div>
        </li>
    <li></li>
    </ul>
    <ul>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">女娃娃</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">星星可爱</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">呆萌女</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">狗狗</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">绿树</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">粉爱粉爱的</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">蜡笔小新</p>
            </div>
        </li>
    </ul>
    <ul>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">震不碎的心</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">很有意境</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">樱木花道最爱啊</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">俩骷髅</p>
            </div>
        </li>
    <li>
            <div class="in">
          <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">萌妹子</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">可爱的小狗</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">夫妇俩白头偕老</p>
            </div>
        </li>
    </ul>
    <ul>
    <li></li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">刷子</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">偶的头像</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">树叶子</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">星星</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">浅色哦</p>
            </div>
        </li>
    <li></li>
    </ul>
    <ul>
    <li></li>
    <li></li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">太阳帅哥</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">大笑脸</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">企鹅</p>
            </div>
        </li>
    <li></li>
    <li></li>
    </ul>
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">
                <p class="pTxt">小兔子</p>
            </div>
        </li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".heartPic li").hover(function(){
        $(this).addClass("on");
        $(this).find("img").animate({"width":"200px","height":"200px"});
        $(this).find("div").animate({"width":"200px","height":"200px"});
        $(this).find(".pTxt").animate({"width":"200px","height":"20px"});
        $(this).find("p").addClass("showDiv");
    },function(){
        $(this).animate({height:"100px"},100).removeClass("on");
        $(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
        $(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
        $(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
    });
})
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

 

posted on 2015-05-31 15:27  梦之航  阅读(1109)  评论(0)  编辑  收藏  举报

导航