基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】
最近项目不多，闲下来看到很多图片墙 的展示效果，抽空也写了个小插件如下：
PS：这个插件最好在页面载入下animation那个动画插件否则效果有点单一，动画插件地址是：http://blog.csdn.net/nx8823520/article/details/8287506，，顺便附带说下，进步本身基于就是交流和共享，个人不反对转载文章，但是麻烦转载的话标注下原文地址，方便碰到问题后交流谢谢,DEMO在下面，这个DEMO是用css3写的不ie下读取的js，css3完全可以达到这个效果 甚至更好，只不过对于替换图片有点无力，不过这本身也就不是css做的事
<!DOCTYPE html><html><head> <title>js效果照片墙</title> <style> .photo-bx,.photo-item{margin:0;padding:0;} .photo-bx{width:600px;margin:50px auto;zoom:1;position:relative;} .photo-bx:after{display:block;content:'.';visibility:hidden;clear:both;overflow:hidden;} .photo-item{float:left;margin:5px;list-style:none;width:125px;height:125px;} /*css3Effect*/ .photo-item .p-bx, .photo-item .img-bg, .photo-item img, .photo-item .img-bg div{-moz-transition:all 0.5s ease-out 0s;-webkit-transition:all 0.5s ease-out 0s;-o-transition:all 0.5s ease-out 0s;} .photo-item .p-bx{position:absolute;} .photo-item img{position:absolute;;left:0;top:0;background:#fff;} .photo-item .img-bg{position:absolute;border:1px solid #aaa;width:125px;height:125px;left:-5px;top:-5px;visibility:hidden;background:#fff;} .photo-item .img-bg div{background:#666;height:116px;width:116px;margin:4px;} .photo-item .p-bx:hover{z-index:2;width:225px;height:225px;margin:-50px 0 0 -50px;} .photo-item .p-bx:hover .img-bg{visibility:visible;width:225px;height:225px;} .photo-item .p-bx:hover .img-bg div{width:216px;height:216px;} .photo-item .p-bx:hover .left{-moz-transform:rotate(6deg) translate(6px,-1px);-webkit-transform:rotate(6deg) translate(6px,-1px);-o-transform:rotate(6deg) translate(6px,-1px);} .photo-item .p-bx:hover .right{-moz-transform:rotate(-5deg) translate(-5px,1px);-webkit-transform:rotate(-5deg) translate(-5px,1px);-o-transform:rotate(-5deg) translate(-5px,1px);} .photo-item .p-bx:hover img{border:1px solid #aaa;padding:4px;left:-5px;top:-5px;box-shadow:1px 1px 3px #383838;width:215px;height:215px;} </style></head><body><ul class="photo-bx"> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li></ul><ul class="photo-bx"> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li> <li class="photo-item"> <div class="p-bx"> <div class="img-bg left"><div></div></div> <div class="img-bg right"><div></div></div> <img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"> </div> </li></ul><!--[if lt IE 7]><script src="../marquee/animation.source.js"></script><script src="../marquee/imgshow.source.js"></script><script> var D = document,imgBx = D.getElementsByTagName("ul"); Imgshow({oEvn:imgBx,styJson:{width:200,height:220}});</script><!--[end if]--></body></html>