您的位置:阿里西西 > js网页特效代码 > 图像特效 > js仿jquery插件lightBox特效代码演示

js仿jquery插件lightBox特效代码演示

  本站整理   佚名   2013-08-28   点击:   我要评论
更多
原生Js仿的一个jquery中light-box特效,外加鼠标滚轮缩放功能。。。
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>js仿jquery-lightBox--网页特效演示站 by js.alixixi.com</title>
<style>
body,ul,li,p,img{margin: 0;padding: 0}
html,body{background: #fff;}
.lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
.lightBox ul{width: 750px}
.lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline;}
.lightBox li img{height: 80px;width: 140px}

/**弹出层样式***/
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
.popup{background:#fff url(./lightBox_files/loading.gif) no-repeat center;border: 10px solid #fff;position: absolute;z-index: 2;;overflow:-hidden;width: 320px;height: 240px;}
.popup img{height: auto;width: auto;}
.btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
.prev{left: 0;background: url(./lightBox_files/lightbox-btn-prev.gif) no-repeat  0 50px;}
.next{background: url(./lightBox_files/lightbox-btn-next.gif) no-repeat  right 50px;}
.popupBottom{position: relative;z-index: 3;margin-top:4px}
.popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url(./lightBox_files/lightbox-btn-close.gif) no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
</style>
</head>
<body>
<div class="lightBox">
<ul>                       
 <li><img src="http://www.webrhai.com/Public/demo/lightBox/images/11.jpg" _title="图片展示特效11" _src="http://www.webrhai.com/Public/demo/lightBox/images/1.jpg"></li>
 <li><img src="http://www.webrhai.com/Public/demo/lightBox/images/22.jpg" _title="图片展示特效22" _src="http://www.webrhai.com/Public/demo/lightBox/images/2.jpg"></li>
 <li><img src="http://www.webrhai.com/Public/demo/lightBox/images/33.jpg" _title="图片展示特效33" _src="http://www.webrhai.com/Public/demo/lightBox/images/3.jpg"></li>
 <li><img src="http://www.webrhai.com/Public/demo/lightBox/images/44.jpg" _title="图片展示特效44" _src="http://www.webrhai.com/Public/demo/lightBox/images/4.jpg"></li>
 <li><img src="http://www.webrhai.com/Public/demo/lightBox/images/55.jpg" _title="图片展示特效55" _src="http://www.webrhai.com/Public/demo/lightBox/images/5.jpg"></li>
</ul>
</div>
<script>
/*
*  author:涛涛
*  date:2013/8/22
*/
(function(win){
    function myLightBox(elem,isZoom,src,titletxt){
        this.elem=typeof elem=='object' ? elem : this.$('lightBox')[0];
        this.isZoom=typeof isZoom=='undefined' ? true : isZoom;
        this.src=src || '_src';
        this.titletxt=titletxt || '_title';
        this.isShow=false;
        this.index=0;
        this.aImages=this.elem.getElementsByTagName('img');
        this.len=this.aImages.length;
        this.showPopup();
    };
    var lightBox=myLightBox.prototype;
    //============显示弹出层
    lightBox.showPopup=function(){
        var self=this,
        img=this.aImages;
        for(var i=0;i<this.len;i++){
            img[i].index=i;
            img[i].onclick=function(){
                 self.index=this.index;
                 self.createPopup(this.getAttribute(self.src),this.getAttribute(self.titletxt));
            }
         }
    };
    //===========class获取元素
    lightBox.$=function(s,t,p){
      var aElement=(p||document).getElementsByTagName(t||'*'),
          reg=new RegExp('(^|\\s)'+s+'(\\s|$)'),
          aResult=[];
      for(var i=0;i<aElement.length;i++){
         reg.test(aElement[i].className) && aResult.push(aElement[i]);
      };
      return aResult;
    };

    //==============创建弹出层展示
    //params   src  图片路径
    //params title  显示文字
    lightBox.createPopup=function(src,title){
        var self=this,
        oPopup=document.createElement('div'),//弹出层外框
     oMask=document.createElement('div'),//遮罩
     oPrev=document.createElement('div'),//上按钮
     oNext=document.createElement('div'),//下按钮
     oBottom=document.createElement('div'),//底部盒子
     oTitle=document.createElement('div'),//底部文字盒子
     oClose=document.createElement('div'),//关闭
     oImg=document.createElement('img'),//图片
        vw=document.documentElement.clientWidth,
        vh=document.documentElement.clientHeight;

     oMask.className='mask';
     oPopup.className='popup';
     oPrev.className='prev btn';
     oNext.className='next btn';
     oBottom.className='popupBottom';
     oTitle.className='popupTitle';
     oClose.className='popupClose';

     oTitle.innerHTML=title || '';

        oPopup.style.margin='0';
        oPopup.style.left=(vw-320)/2+'px';
        oPopup.style.top=(vh-240)/2+'px';
        oMask.style.height=this.getFullHeight()+'px';
        this.hide(oPrev,oNext,oBottom,oClose,oImg);

        oBottom.appendChild(oClose);
        oBottom.appendChild(oTitle);
        oPopup.appendChild(oPrev);
        oPopup.appendChild(oNext);
        oPopup.appendChild(oImg);
        oPopup.appendChild(oBottom);
        document.body.appendChild(oMask);
        document.body.appendChild(oPopup);

     
     oImg.onload=function(){
            self.show(this,oClose,oBottom,oNext,oPrev);
            this.style.height='auto';
            this.style.width='auto';

            var oldw=self.css(oPopup,'width'),oldh=self.css(oPopup,'height');
            oPopup.style.height='auto';
            oPopup.style.width='auto';
            oPopup.style.opacity=0;
            oPopup.style.filter='alpha(opacity:0)';
            var h=oPopup.clientHeight,w=oPopup.clientWidth;
            oPopup.style.height=oldh;
            oPopup.style.width=oldw;
            self.hide(oBottom,oImg);

            self.move(oPopup,{opacity:100,height:h,width:w,left:parseInt((vw-w)/2),top:parseInt((vh-h)/2)},5,function(){
                 self.show(oBottom,oImg);
                 oImg.style.width='100%';
                 self.isShow=true;
            });
     };
        self.move(oMask,{opacity:60},5);

        oImg.src=src;
        this.prev=oPrev;
        this.next=oNext;
        this.close=oClose;
        this.img=oImg;
        this.txt=oTitle;
        this.btm=oBottom;
        this.p=oPopup;
        this.mask=oMask;


        this.nexts();
        this.prevs();
        this.stopPropagation();
        this.closes();
        this.isZoom && this.mouseWheels();
        this.resizefn();
    };
    //============重置窗口大小
    lightBox.resizefn=function(){
        if(!this.p)return;
        var self=this;
        this.addEvent(window,'resize',function(){
            if(!self.p)return;
            var viw=self.getWinSize()[0],
            vih=self.getWinSize()[1],
            p=self.p,ms=self.mask,
            h=p.offsetHeight,w=p.offsetWidth;

            self.css(p,'left',(viw-w)/2);
            self.css(p,'top',(vih-h)/2);
            self.css(ms,'height',Math.max(h,vih));
            self.css(ms,'width',Math.max(w,viw));
        })
    };
    //===============获取窗口大小
    lightBox.getWinSize=function(){
        var d=document.documentElement;
        return [d.clientWidth,d.clientHeight];
    };
    //==============鼠标滚轮
    lightBox.mouseWheels=function(){
        this.addEvent(document,'mousewheel',wheel);
        this.addEvent(document,'DOMMouseScroll',wheel);
        var self=this,isBeyond=false;

        function wheel(e){
            var ev=window.event||e,flag=true,
            h=self.img.height,w=self.img.width,
            l=self.p.offsetLeft,t=self.p.offsetTop,
            scale=h/w,
            nw=Math.round(20/scale),
            txtH=Math.max(self.btm.offsetHeight,22)+8,
            viw=document.documentElement.clientWidth-80,
            vih=document.documentElement.clientHeight-50,
            maxH=self.p.offsetHeight,
            maxW=self.p.offsetWidth;
            flag=ev.wheelDelta ? ev.wheelDelta<0 : ev.detail>0; 
            if(maxW>=viw || maxH>=vih){
                isBeyond=true;
            };
            switch(flag)
            {
                case true://往下
                   if(h<150 || w<200)return;
                    h-=20;
                    w-=nw;
                    l+=nw/2;
                    t+=10;
                    isBeyond=false;
                break;
                default :  //往上
                    h+=20;
                    w+=nw;
                    l-=nw/2;
                    t-=10;
            };
            if(!isBeyond){
                self.css(self.p,'height',h+txtH);
                self.css(self.p,'left',l);
                self.css(self.p,'width',w);
                self.css(self.p,'top',t);
                ev.preventDefault && ev.preventDefault();
            }
            return false;
        }
    };
    //==============阻止冒泡
    lightBox.stopPropagation=function(){
        this.p.onclick=function(ev){
            var e=window.event||ev;
            e.stoppropagation ? e.stopPropagation() :(e.cancelBubble=true);
        }
    };
    //=============隐藏
    lightBox.hide=function(){
        for(var i=0;i<arguments.length;i++){
             arguments[i].style.display='none';
        }
    };
    //=============显示
    lightBox.show=function(){
        for(var i=0;i<arguments.length;i++){
             arguments[i].style.display='block';
        }
    };
    //==============绑定事件
    //params  o dom对象
    //params  type 事件类型
    //params  fn   事件函数
    lightBox.addEvent=function(o,type,fn){
        return o.addEventListener ? o.addEventListener(type,fn,false) : o.attachEvent('on'+type,fn);
    };
    //==============解除事件绑定
    lightBox.removeEvent=function(o,type,fn){
        return o.detachEvent ? o.detachEvent('on'+type,fn) : o.removeEventListener(type,fn);
    };
    //==============关闭
    lightBox.closes=function(){
        var self=this;
        document.onclick=this.close.onclick=function(){
            if(!self.isShow)return;
            self.move(self.mask,{opacity:0},5,function(){
                  document.body.removeChild(self.mask);
            });
            document.body.removeChild(self.p);
            self.isShow=false;
            delete self.p,self.prev,self.next,self.close,self.img,self.txt,self.btm,self.mask;
            self.img.onload=null;
        };
    };
    //==============点击上一张
    lightBox.prevs=function(){
        var self=this;
        this.prev.onclick=function(){
            var index=--self.index;
            if(index<0){
                index=self.index=self.len-1;
            };
            self.clickSwitch(index);       
         }
    };

    //==============点击下一张
    lightBox.nexts=function(){
        var self=this;
        this.next.onclick=function(){
            var index=++self.index;
            if(index>=self.len){
                index=self.index=0;
            };
            self.clickSwitch(index);
        }
    };
    //================点击切换公有代码
    lightBox.clickSwitch=function(i){
        this.hide(this.prev,this.next,this.close,this.btm,this.img);
        this.img.src=this.aImages[i].getAttribute(this.src);
        this.txt.innerHTML=this.aImages[i].getAttribute(this.titletxt);
    }

    //=============缓冲运动
    lightBox.move=function(o,json,fx,fn){
     var self=this;
     o.timer && clearInterval(o.timer);
     o.timer=setInterval(function(){
      var bStop=true;
            var cur=0;
      for(var attr in json){
         cur=attr=='opacity' ? parseInt(parseFloat(self.css(o,attr)).toFixed(2)*100):parseInt(self.css(o,attr));
         var speed=(json[attr]-cur)/fx;
         speed=speed>0?Math.ceil(speed):Math.floor(speed);
         if(attr=='opacity'){
            o.style.filter='alpha(opacity:'+(speed+cur)+')';
            o.style.opacity=(speed+cur)/100;
         }else{
            o.style[attr]=(cur+speed)+'px';
         };
         if(cur!=json[attr]){
           bStop=false;
         };
         if(bStop){
           clearInterval(o.timer);
           (typeof fn=='function')&&fn();
         }
      }
     },30)
    };
    //=============获取元素样式
    lightBox.css=function(o,attr,val){
        if(arguments.length==2){
            return o.currentStyle ? o.currentStyle[attr] : getComputedStyle(o,false)[attr];
        }
        else
        {
            o.style[attr]=val+'px';
        }
    };

    //=============获取页面高度
    lightBox.getFullHeight=function(){
        var sh=document.body.scrollHeight-4,
            ch=document.documentElement.clientHeight;
        return Math.max(sh,ch);
    };
    win.myLightBox=myLightBox;
})(window);

var taotao=new myLightBox('lightBox'); 
//注意图片尺寸不能太小
taotao=null;
</script>
</body>
</html>


更多关于 jquery lightBox 的文章
会员评论所有会员评论

  

相关排行总榜

广告代码

菜单特效

日期特效