jQuery心形图片墙效果-插件特效-星河码客

jQuery心形图片墙鼠标悬浮变大是一款jquery hover冒泡事件制作心型图片墙鼠标悬浮图片变大显示。使用方法引用js库css /* heartPic */ .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; }html代码

可爱的女娃娃
呆萌的小熊
卡哇伊的小熊
女巫骑着扫帚

女娃娃
星星可爱
呆萌女
狗狗
绿树
粉爱粉爱的
蜡笔小新

震不碎的心
很有意境
樱木花道最爱啊
俩骷髅
萌妹子
可爱的小狗
夫妇俩白头偕老

刷子
偶的头像
树叶子
星星
浅色哦

太阳帅哥
大笑脸
企鹅

小兔子

调用方法 $(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" }); }); })主要用了animate方法

jQuery心形图片墙效果

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»