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 ...
随机推荐
- Java基础学习总结（71）——深入理解Java虚拟机内存
Java虚拟机中的内存分配图 : 各个区域的特性总结如下表: 补充说明: 当多线程情形下,可能多个线程要在堆上分配内存,那么可能出现内存分配的同步问题,解决方案有两个,一个就是同步内存分配动作:另一个 ...
- 清北学堂模拟赛d2t6 分糖果(candy)
题目描述总共有n颗糖果,有3个小朋友分别叫做L,Y,K.每个小朋友想拿到至少k颗糖果,但这三个小朋友有一个共同的特点:对3反感.也就是说,如果某个小朋友拿到3颗,13颗,31颗,333颗这样数量的糖果 ...
- Codeforces Round #305 (Div. 2) C题 （数论）
C. Mike and Frog time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Apache模块开发指南-APR池
转:原文: http://blog.csdn.net/zmxiangde_88/article/details/8038150 ------------------------------------ ...
- XMPP基本内容简单介绍
即时通讯技术简单介绍 即时通讯技术(IM)支持用户在线实时交谈.假设要发送一条信息,用户须要打开一个小窗体,以便让用户及其朋友在当中输入信息并让交谈两方都看到交谈的内容.有很多的IM系统,如AOL I ...
- 迅为4412开发板Linux驱动教程/硬件知识及原理图的使用
视频教程下载地址:http://pan.baidu.com/s/1pJwxUfL 嵌入式研发流程介绍 • PCB研发流程介绍 – 方案,原理图(网表) – layoutproject师(gerber文 ...
- 深入剖析Android四大组件(一)——Activity生命周期具体解释
1.管理Activity的生命周期 不管是正在执行的Activity还是没有执行的Activity,它们都接受Android的框架管理,这使得Activity处于不同的生命周期. ①Activity的 ...
- UI设计--->全心全意为人民服务的宗旨---->注重客户体验--->软件持久的生命力
UI即User Interface(用户界面)的简称. UI设计是指对软件的人机交互.操作逻辑.界面美观的总体设计. 好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适简单.自由.充分 ...
- 【NOIP2018】为什么这么无力啊
菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...
- 【撸码caffe四】 solver.cpp&&sgd_solver.cpp
caffe中solver的作用就是交替低啊用前向(forward)算法和后向(backward)算法来更新参数,从而最小化loss,实际上就是一种迭代的优化算法. solver.cpp中的Solver ...