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 ...
随机推荐
- 小白神器 - 一篇博客学会CSS
一. 简介 1. css定义 CSS是Cascading Style Sheets的简称,中文称为层叠样式表. 属性和属性值用冒号隔开,以分号结尾. 2. 四种引入方式 1.行内式 行内式是在标签 ...
- 02. 爬取get请求的页面数据
目录 02. 爬取get请求的页面数据 一.urllib库 二.由易到难的爬虫程序: 02. 爬取get请求的页面数据 一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用 ...
- unigui的session【1】
目前是1394. 明白session如何使用管理,看demo Session List和SessionTimeout unit Main; interface uses Windows, Messag ...
- scrapy——8 scrapyd使用
scrapy——8 scrapyd使用 什么是scrapyd 怎么安装scrapyd 如何使用scrapyd--运行scrapyd 如何使用scrapyd--配置scrapy.cfg 如何使用s ...
- noip模拟赛 伪神
题目背景 一切就绪 但愿,这样就好 自那之后的五年—— 作为封印持续增大的结果,在我体内积蓄了庞大的光精灵的力量 在幻灯结界里觉醒过来的我,和从封印解放出的德米奥格,就如同字面意思所述的,获得了等同于 ...
- 清北学堂模拟赛d1t6 或和异或(xor)
题目描述 LYK最近在研究位运算,它研究的主要有两个:or和xor.(C语言中对于|和^) 为了更好的了解这两个运算符,LYK找来了一个2^n长度的数组.它第一次先对所有相邻两个数执行or操作,得到一 ...
- extjs 4 chart 时间轴格式的处理
var dayStore = Ext.create('Ext.data.JsonStore', { fields: [{ name: 'name', type: 'date', dateFormat: ...
- [bzoj3524/2223][Poi2014]Couriers_主席树
Couriers bzoj-3524 Poi-2014 题目大意:给定n个数的序列,询问区间内是否存在一个在区间内至少出现了(区间长度>>1)次的数.如果有,输出该数,反之输出0. 注释: ...
- Spring MVC-集成（Integration）-集成LOG4J示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_log4j.htm 说明:示例基于Spring MVC 4.1.6. 以下示例说明 ...
- [转]十五天精通WCF——终结篇 那些你需要注意的坑
终于一路走来,到了本系列的最后一篇了,这一篇也没什么好说的,整体知识框架已经在前面的系列文章中讲完了,wcf的配置众多,如果 不加一些指定配置,你可能会遇到一些灾难性的后果,快来一睹为快吧. 一: 第 ...