很温馨的一个源码,组成一个大大的心型:
jQuery 心型图片墙鼠标悬浮变大*{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;}
-
可爱的女娃娃
-
呆萌的小熊
-
卡哇伊的小熊
-
女巫骑着扫帚
-
女娃娃
-
星星可爱
-
呆萌女
-
狗狗
-
绿树
-
粉爱粉爱的
-
蜡笔小新
-
震不碎的心
-
很有意境
-
樱木花道最爱啊
-
俩骷髅
-
萌妹子
-
可爱的小狗
-
夫妇俩白头偕老
-
刷子
-
偶的头像
-
树叶子
-
星星
-
浅色哦
-
太阳帅哥
-
大笑脸
-
企鹅
-
小兔子
$(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"});
});
})
使用前请将源码中调用的 jquery.js 和图片文件地址换成有效地址。