基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】

最近项目不多，闲下来看到很多图片墙 的展示效果，抽空也写了个小插件如下：

PS：这个插件最好在页面载入下animation那个动画插件否则效果有点单一，动画插件地址是：http://blog.youkuaiyun.com/nx8823520/article/details/8287506，，顺便附带说下，进步本身基于就是交流和共享，个人不反对转载文章，但是麻烦转载的话标注下原文地址，方便碰到问题后交流谢谢,DEMO在下面，这个DEMO是用css3写的不ie下读取的js，css3完全可以达到这个效果 甚至更好，只不过对于替换图片有点无力，不过这本身也就不是css做的事

/**
 * @name: Imgshow
 * @overview: 用于lst图片展示缩放效果
 * @require: 此模块如需动画效果鱼依附ani动画组件（地址:http://blog.youkuaiyun.com/nx8823520/article/details/8287506）
 * @author: Tommy_21011219_
 * @argument:
 * 一、只需一个参数为对象：
     * 1、oEvn为需要变换对象的父级ID或者节点；（此效果用事件委托绑定所以第一个参数传入父级dom即可）--必须值
     * 2、childTag为效果绑定的几点的标签名默认为li，可选值
     * 3、styJson效果变换的一个json对象，如宽高等（例：styJson:{width:200,height:220}）
     * 4、imgPos需变换图片地址，默认为元素上第一张图片，可选项
     * 5、dataBigImg图片变大时切换的大图地址，默认查找属性data-bj不存在此属性及未传入此参数时，默认放大原图，可选项
 */
!function(local){
    var Imgshow = function(oArg){
        var _this = this;
        if(!(_this instanceof Imgshow))return new Imgshow(oArg);
        this.init.apply(this,arguments);
    }
    Imgshow.prototype = {
        init:function(oArg){
            //判断参数是否正确
            if(Object.prototype.toString.call(oArg)!=="[object Object]"||!oArg.oEvn||!oArg.styJson) return false;
            //最新层叠设置
            this.minzIndex = 1;
            //合并对象
            this.merge(oArg);
            var i= 0, len= oArg.oEvn.length||1,eleAry;
            this.length = len;
            for(;i<len;i++) this[i] = oArg.oEvn.length ? this.getEle(oArg.oEvn[i]) : this.getEle(oArg.oEvn);
            //事件初始化
            this.evenInit();
        },
        merge:function(o){
            this.o = {
                oEvn:null,
                childTag:'li',
                styJson:null,
                imgPos:0,
                dataBigImg:'data-bj'
            }
            for(var c in o)this.o[c] = o[c];
        },
        getEle:function(i){
            return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);
        },
        evenInit:function(){
            var i, j, chidEle, chidleng, leng= this.length;
            i= 0;
            //初始化目标子元素
            for(; i<leng; i++){
                this[i].childEle= this[i].getElementsByTagName(this.o.childTag);
                if(!this[i].childEle) return;
                j= 0;
                chidEle= this[i].childEle;
                chidleng= chidEle.length;
                //set父级高度
                this[i].style.height= this[i].offsetHeight+ "px";
                //设置子元素的left、top等值&&记录默认属性
                for(; j<chidleng; j++){
                    chidEle[j].style.top= chidEle[j].offsetTop+ "px";
                    chidEle[j].style.left= chidEle[j].offsetLeft+ "px";
                    for(var sty in this.o.styJson){
                        chidEle[j][sty] = this.getStyle(chidEle[j], sty);
                    }
                }
                //set子元素position
                j= 0;
                for(; j<chidleng; j++) {
                    chidEle[j].style.position= "absolute";
                    chidEle[j].style.margin= 0;
                }
                //事件绑定
                this.bindEven(this[i], "mouseover", this.start);
            }
        },
        bindEven:function(oEle,oEvn,fn){
            var _this= this, eventHander;
            if(!oEle)return;
            eventHander = function(e){fn.call(oEle, e, _this);}
            oEle.attachEvent ? oEle.attachEvent("on"+oEvn, eventHander) : oEle.addEventListener(oEvn, eventHander, false);
        },
        start:function(e, self){
            var oEvn = e || event, oTarget= oEvn.srcElement || oEvn.target;
            //定位目标元素
            while(oTarget.nodeName.toLowerCase()!=self.o.childTag&&oTarget!=this&&oTarget.parentNode!=this) oTarget = oTarget.parentNode;

            //目标元素移入条件判别
            if(oTarget.nodeName.toLowerCase()==self.o.childTag&&oTarget.parentNode==this&&!oTarget.evnBegin){
                //zIndex层叠添加
                oTarget.style.zIndex= self.minzIndex++;
                //styJon属性添加
                self.o.styJson.width&& (self.o.styJson.marginLeft= "-"+ (self.o.styJson.width-parseInt(self.getStyle(oTarget, "width")))/2);
                self.o.styJson.height&& (self.o.styJson.marginTop= "-"+ (self.o.styJson.height-parseInt(self.getStyle(oTarget, "height")))/2);
                //查找图片
                var temVar = oTarget.getElementsByTagName("img"), temAtr;
                oTarget.img = temVar[self.o.imgPos] ? temVar[self.o.imgPos] : temVar[0];
                //图片替换
                temAtr = oTarget.img.getAttribute(self.o.dataBigImg);
                oTarget.oldImg = oTarget.img.src;
                temAtr&&temAtr!=oTarget.img.src&&(oTarget.img.src = temAtr);
                if(typeof ani=="function"){
                    //动画开始
                    ani(oTarget, {styJson:self.o.styJson});
                    ani(oTarget.img, {styJson:{width:self.o.styJson.width,height:self.o.styJson.height}});
                }else{
                    for(var sty in self.o.styJson)oTarget.style[sty] = sty == "opacity" ? self.o.styJson[sty] : self.o.styJson[sty] + 'px';
                    //重置图片属性
                    oTarget.img.width = self.o.styJson.width;
                    oTarget.img.height = self.o.styJson.height;
                }
                //自身属性绑定禁止事件干扰
                oTarget.evnBegin = true;
                //鼠标移出事件bind
                self.bindEven(oTarget, "mouseout", self.over);
            }
        },
        over:function(e, self){
            var oEvn = e || event,
                reltg = oEvn.relatedTarget ? oEvn.relatedTarget : oEvn.type == 'mouseout' ? oEvn.toElement : oEvn.fromElement;
            while (reltg && reltg != this){reltg = reltg.parentNode;}
            if(reltg!=this&&this.evnBegin){
                if(typeof ani=="function"){
                    ani(this,{styJson:{"marginLeft":0,"marginTop":0,"width":this.width,"height":this.height}, isHide:false});
                    ani(this.img,{styJson:{"width":this.width,"height":this.height}});
                }else{
                    for(var sty in self.o.styJson) this.style[sty] = this[sty] ? this[sty] : 0;
                    //重置图片属性
                    this.img.width = parseInt(this.width);
                    this.img.height = parseInt(this.height);
                }
                this.evnBegin = false;
                //图片还原
                this.img.src != this.oldImg&&(this.img.src = this.oldImg);
            }
        },
        getStyle:function(oEle, iAtr){
            return oEle.currentStyle ? oEle.currentStyle[iAtr] : getComputedStyle(oEle, null)[iAtr];
        }
    }
    local.Imgshow = Imgshow;
}(window)

DEMO如下：

<!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>