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>
JQuery特效之心形图片墙的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- 一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览 源码下载 来看下实现的 ...
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Web设计师值得收藏的10个jQuery特效
jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...
随机推荐
- Delphi 10.3.2最新消息
官方已经发布消息,招内测人员了! https://www.barnsten.com/default/newsupdates/details?news_id=328 https://docs.googl ...
- JavaSE 学习笔记之多线程（十三）
多线程: 进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间. 线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺 ...
- elasticsearch 权威指南Mapping(映射）
什么是映射 类似于数据库中的表结构定义,主要作用如下: 定义Index下字段名(Field Name) 定义字段的类型,比如数值型,字符串型.布尔型等 定义倒排索引的相关配置,比如是否索引.记录pos ...
- 用R语言 画条形图（基于ggplot2包）
1.用qplot(x,data=data,geom.=”bar”,weight=y)+scale_y_continuous("y")画出y关于x的条形. 图中提示binwidth这 ...
- hdu_1056_HangOver_201311071354
HangOver Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- 使用Java VisualVM配置Java应用程序/分析CPU或内存的使用情况（转）
以下内容翻译自(机翻):https://baptiste-wicht.com/posts/2010/07/profile-applications-java-visualvm.html 当您需要发现应 ...
- UVA 11825 状态压缩DP+子集思想
很明显的状态压缩思想了.把全集分组,枚举每个集合的子集,看一个子集是否能覆盖所有的点,若能,则f[s]=max(f[s],f[s^s0]+1).即与差集+1比较. 这种枚举集合的思想还是第一次遇到,果 ...
- 什么是OTN交换？
作者:Babak Samimi 大家不停地听到大数据的显著增长及其带来的全球运营商网络上流量的剧增. 比方.Qmee有一个有意思的infographic,在2013年捕捉了60秒的线上流量,其统计结果 ...
- 在Cocos2d-X中玩转精灵
创建一个Cocos2d-Xproject,project的文件夹例如以下图所看到的: 在Resourcees目录中加入一张png格式的图片 在HelloWorldScene.cpp文件里的bool H ...
- hdu 4850 字符串构造---欧拉回路构造序列 递归+非递归实现
http://acm.hdu.edu.cn/showproblem.php? pid=4850 题意:构造长度为n的字符序列.使得>=4的子串仅仅出现一次 事实上最长仅仅能构造出来26^4+4- ...