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 ...
随机推荐
- python的转义字符及用法详解
在需要在字符中使用特殊字符时,python用反斜杠(\)转义字符. Python3.7 的官方文档中列出的所支持的转义字符,如下表: 中文版: 注:\oyy 应该是 \0yy 另外 :\e 和 \0 ...
- odoo 权限杂记
最近做一个任务督办模块,涉及到一些权限问题,折磨了几天,终于是解决了. 任务表中关联了hr_employee,分别有默认字段创建人,Many2one的发布人.监督人和Many2many类型的主责人,这 ...
- Linux - 用户管理与文件权限
目录 Linux - 用户管理与文件权限 创建普通用户 切换用户 userdel删除用户 sudo 命令 文件与目录权限 Linux权限的解读 目录权限 查看用户权限的命令 文件权限 修改权限的命令 ...
- 第六节：numpy之数组拼接
- 在docker上构建tomcat容器
1.查看docker上的镜像 [root@holly ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 5.6 73829d7b ...
- qwb与学姐
qwb与学姐 Time Limit: 1 Sec Memory Limit: 128 MB Description qwb打算向学姐表白,可是学姐已经受够了他的骚扰,于是出了一个题想难住他:已知一幅 ...
- noip模拟赛 钻石
分析:用裸暴力可以得60分,每次dfs,看第i个盒子到底有没有钻石就行了.其实这很像0/1背包问题,只是多了一个m的限制.这要怎么办呢?因为概率是可以加减的,所以可以先不考虑m的限制,求出概率,然后d ...
- 清北学堂模拟赛d1t5 拍照(photo)
题目描述 假设这是一个二次元.LYK召集了n个小伙伴一起来拍照.他们分别有自己的身高Hi和宽度Wi.为了放下这个照片并且每个小伙伴都完整的露出来,必须需要一个宽度为ΣWi,长度为max{Hi}的相框. ...
- c++ primer 第三章 标准库类型
1. string 标准库 1.1初始化 string s1; 默认构造函数s1为空 string s2(s1); 将s2初始化为s1的一个副本 string s3("value" ...
- 洛谷——P1505 苹果摘陶陶
题目背景 根据2005年的Noip普及组第一题衍生出的一题. 但是有一点点的恶搞成分在里面..... 题目描述 话说去年苹果们被陶陶摘下来后都很生气,于是就用最先进的克隆技术把陶陶克隆了好多份> ...