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" >
                <p class="pTxt">可爱的女娃娃</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <p class="pTxt">卡哇伊的小熊</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <p class="pTxt">女娃娃</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">星星可爱</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">呆萌女</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">狗狗</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">绿树</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">粉爱粉爱的</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <p class="pTxt">震不碎的心</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">很有意境</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">樱木花道最爱啊</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">俩骷髅</p>
            </div>
        </li>
    <li>
            <div class="in">
          <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">萌妹子</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">可爱的小狗</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <p class="pTxt">刷子</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">偶的头像</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">树叶子</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">星星</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <p class="pTxt">太阳帅哥</p>
            </div>
        </li>
    <li>
            <div class="in">
                <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <p class="pTxt">大笑脸</p>
            </div>
        </li>
    <li>
            <div class="in">
            <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >
                <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" >
                <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>
时间： 2024-11-09 10:05:35

JQuery特效之心形图片墙的相关文章

DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一个滚动的文本字幕,应用于文字.图片.表格. DIV+CSS图片不间断滚动jquery特效,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片). 使用方法如下: 1.加载JavaScript. 1 <script type=&qu

Image Wall - jQuery &amp; CSS3 图片墙效果

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示     下载源码 您可能感兴趣的相关文章 充满想象力的 JavaScript 物理和重力实验 精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

完美图片蒙太奇的JS效果基于JQuery实现（多个大小不同图片拼接成图片墙）

最近开发一个宠物服务网站 http://www.teyua.com/ 里面有个照片更新栏目,需要实现这个功能. 参考了很多,包括国外的图片墙,就是把多个大小不一样的图片根据一个算法整齐的组合成为图片墙. 需要实现的功能有:自动拼接,横竖都要完美对齐,窗口大小变化是自动调整,最后依然完美对齐. 网上找到的所有实现,都有缺陷,包括百度www.badu.com的图片搜索,组合的图片都有缺陷,看下图,右侧部分红框,边缘未对齐. Bing.cn 的图片搜索拼接的图片墙也有缺陷,而且比百度还严重,请看下图中

一款基于jquery超炫的图片切换特效

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp

jQuery 3D 女神图片墙 可旋转播放

详细内容请点击 还记得之前分享过一款HTML5 3D立体图片相册,相册中的美女图片非常有特色.今天我们又要来分享一款可旋转播放的jQuery 3D女神图片墙,和一般的图片播放器不同的是,这款图片播放器是3D环形的,图片展示也将随着环形来回切换,效果非常不错.  在线演示源码下载 学习来源:http://www.html5tricks.com/jquery-3d-girl-image-player.html 更多html5内容请点击

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚动图片轮播切换 jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果 jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码 jQuery带缩略图的焦点图代码_带标题的焦点图代码 jquery图片轮播插件带小缩略图片的焦点图切换效果代码 原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮

jQuery实现鼠标经过图片变亮效果

在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!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

Web设计师值得收藏的10个jQuery特效

jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的Javascrīpt框架.这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程.这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述. 先试试看?特效实例: View jQuery Demos:http://