照片墙 php源码,分享一个心型照片墙源码

很温馨的一个源码，组成一个大大的心型：

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 和图片文件地址换成有效地址。