效果如图：

代码如下：

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

最新文章

  1. Linux 系统中堆栈的使用方法
  2. 不直接登录SharePoint服务器，通过远程直接部署WSP解决方案包
  3. Delphi结构体的扩展,可以自动初始化,反初始化,自定义拷贝函数.
  4. wifipineapple使用教程
  5. （Array）27. Remove Element
  6. 给 Xamarin.Form For Windows Phone APP 加个漂亮的 &quot;头&quot;
  7. Oracle DBA 的常用Unix参考手册(一)
  8. ubuntu 下编译安装 mysql php nginx 及常见错误 (持续添加)
  9. select自动选中
  10. Teams（uva11609+组合）
  11. js-数组算法收集版（转）
  12. vTPM环境部署(ubuntu)
  13. javascript之prototype原型属性
  14. 《javascript经典入门》-day01
  15. centos7安装laravel
  16. c51较c比较,单片机最小系统
  17. QQ开发技术资料集锦
  18. xaml mvvm(2)之属性绑定
  19. VC孙鑫老师第八课：你能捉到我吗？
  20. Java显式锁学习总结之四：ReentrantLock源码分析

热门文章

  1. JavaScript单元测试工具-Jest
  2. TestNG的安装和使用
  3. 洛谷—— P2424 约数和
  4. Spring MVC-控制器（Controller）-参数方法名称解析器（Parameter Method Name Resolver ）示例（转载实践）
  5. Clojure：添加gzip功能
  6. Android平台Airplay的实现方法
  7. 各个领域常见的一些bug汇总
  8. 【转】Maven的安装与使用(ubuntu)
  9. 使用c3p0与DBCP连接池，造成的MySql 8小时问题解决方式
  10. 人见人爱A+B（杭电2033）