特效

  1 <!DOCTYPE html>
  2 <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3 <meta charset="UTF-8">
  4 <title>js仿jquery-lightBox--网页特效演示站 by js.alixixi.com</title>
  5 <style>
  6 body,ul,li,p,img{margin: 0;padding: 0}
  7 html,body{background: #fff;}
  8 body{height:8000px}
  9 .lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
 10 .lightBox ul{width: 750px}
 11 .lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline; cursor:pointer}
 12 .lightBox li img{height: 80px;width: 140px}
 13 
 14 /**弹出层样式***/
 15 .mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
 16 .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;}
 17 .popup img{height: auto;width: auto;}
 18 .btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
 19 .prev{left: 0;background: url(http://www.webrhai.com/Public/demo/lightBox/images/11.jpg) no-repeat  0 50px;}
 20 .next{background: url(http://www.webrhai.com/Public/demo/lightBox/images/11.jpg) no-repeat  right 50px;}
 21 .popupBottom{position: relative;z-index: 3;margin-top:4px}
 22 .popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
 23 .popupClose{margin-right:15px;height: 22px;width: 66px;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0; background-color:#06F;}
 24 </style>
 25 </head>
 26 <body>
 27 <div class="lightBox" id="cc">
 28 <ul>                       
 29  <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>
 30  <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>
 31  <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>
 32  <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>
 33  <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>
 34 </ul>
 35 </div>
 36 <script>
 37 /*
 38 *  author:涛涛
 39 *  date:2013/8/22
 40 */
 41 
 42     function myLightBox(elem){
 43         this.elem=document.getElementById(elem);
 44         this.isZoom=true;
 45         this.src= '_src';
 46         this.titletxt='_title';
 47         this.isShow=false;
 48         this.index=0;
 49         this.aImages=this.elem.getElementsByTagName('img');
 50         this.len=this.aImages.length;
 51         this.showPopup();
 52     };
 53     
 54     
 55     
 56     
 57     var lightBox=myLightBox.prototype;
 58     
 59     
 60     
 61     //============显示弹出层
 62     lightBox.showPopup=function(){
 63         var self=this,
 64         img=this.aImages;
 65         for(var i=0;i<this.len;i++){
 66             img[i].index=i;
 67             img[i].onclick=function(){
 68                  self.index=this.index;
 69                  self.createPopup(this.getAttribute('_src'),this.getAttribute('_title'));
 70             }
 71          }
 72     };
 73     
 74     
 75     
 76     
 77     
 78     
 79     
 80     
 81 
 82     //==============创建弹出层展示
 83     //params   src  图片路径
 84     //params title  显示文字
 85     lightBox.createPopup=function(src,title){
 86         var self=this,
 87         oPopup=document.createElement('div'),//弹出层外框
 88      oMask=document.createElement('div'),//遮罩
 89      oPrev=document.createElement('div'),//上按钮
 90      oNext=document.createElement('div'),//下按钮
 91      oBottom=document.createElement('div'),//底部盒子
 92      oTitle=document.createElement('div'),//底部文字盒子
 93      oClose=document.createElement('div'),//关闭
 94      oImg=document.createElement('img'),//图片
 95         vw=document.documentElement.clientWidth,
 96         vh=document.documentElement.clientHeight;
 97 
 98      oMask.className='mask';
 99      oPopup.className='popup';
100      oPrev.className='prev btn';
101      oNext.className='next btn';
102      oBottom.className='popupBottom';
103      oTitle.className='popupTitle';
104      oClose.className='popupClose';
105 
106      oTitle.innerHTML=title || '';
107 
108         oPopup.style.margin='0';
109         oPopup.style.left=(vw-320)/2+'px';
110         oPopup.style.top=(vh-240)/2+'px';
111         oMask.style.height=this.getFullHeight()+'px';
112         
113         this.hide(oPrev,oNext,oBottom,oClose,oImg);
114 
115         oBottom.appendChild(oClose);
116         oBottom.appendChild(oTitle);
117         oPopup.appendChild(oPrev);
118         oPopup.appendChild(oNext);
119         oPopup.appendChild(oImg);
120         oPopup.appendChild(oBottom);
121         document.body.appendChild(oMask);
122         document.body.appendChild(oPopup);
123   oImg.src=src;
124 
125 
126 
127      
128      oImg.onload=function(){
129             self.show(this,oClose,oBottom,oNext,oPrev);
130             
131             this.style.height='auto';
132             this.style.width='auto';
133 
134             var oldw=self.css(oPopup,'width'),oldh=self.css(oPopup,'height');
135             oPopup.style.height='auto';
136             oPopup.style.width='auto';
137             oPopup.style.opacity=0;
138             oPopup.style.filter='alpha(opacity:0)';
139             var h=oPopup.clientHeight,w=oPopup.clientWidth;
140             oPopup.style.height=oldh;
141             oPopup.style.width=oldw;
142             self.hide(oBottom,oImg);
143 
144             self.move(oPopup,{opacity:100,height:h,w,left:parseInt((vw-w)/2),top:parseInt((vh-h)/2)},5,function(){
145                  self.show(oBottom,oImg);
146                  oImg.style.width='100%';
147                  self.isShow=true;
148             });
149      };
150      
151      
152      
153      
154      
155         self.move(oMask,{opacity:60},5);
156 
157       
158         this.prev=oPrev;
159         this.next=oNext;
160         this.close=oClose;
161         this.img=oImg;
162         this.txt=oTitle;
163         this.btm=oBottom;
164         this.p=oPopup;
165         this.mask=oMask;
166 
167 
168         this.nexts();
169         this.prevs();
170         this.stopPropagation();
171         this.closes();
172         this.isZoom && this.mouseWheels();
173         this.resizefn();
174     };
175     //============重置窗口大小
176     lightBox.resizefn=function(){
177         if(!this.p)return;
178         var self=this;
179         this.addEvent(window,'resize',function(){
180             if(!self.p)return;
181             var viw=self.getWinSize()[0],
182             vih=self.getWinSize()[1],
183             p=self.p,ms=self.mask,
184             h=p.offsetHeight,w=p.offsetWidth;
185 
186             self.css(p,'left',(viw-w)/2);
187             self.css(p,'top',(vih-h)/2);
188             self.css(ms,'height',Math.max(h,vih));
189             self.css(ms,'width',Math.max(w,viw));
190         })
191     };
192     //===============获取窗口大小
193     lightBox.getWinSize=function(){
194         var d=document.documentElement;
195         return [d.clientWidth,d.clientHeight];
196     };
197     //==============鼠标滚轮
198     lightBox.mouseWheels=function(){
199         this.addEvent(document,'mousewheel',wheel);
200         this.addEvent(document,'DOMMouseScroll',wheel);
201         var self=this,isBeyond=false;
202 
203         function wheel(e){
204             var ev=window.event||e,flag=true,
205             h=self.img.height,w=self.img.width,
206             l=self.p.offsetLeft,t=self.p.offsetTop,
207             scale=h/w,
208             nw=Math.round(20/scale),
209             txtH=Math.max(self.btm.offsetHeight,22)+8,
210             viw=document.documentElement.clientWidth-80,
211             vih=document.documentElement.clientHeight-50,
212             maxH=self.p.offsetHeight,
213             maxW=self.p.offsetWidth;
214             flag=ev.wheelDelta ? ev.wheelDelta<0 : ev.detail>0; 
215             if(maxW>=viw || maxH>=vih){
216                 isBeyond=true;
217             };
218             switch(flag)
219             {
220                 case true://往下
221                    if(h<150 || w<200)return;
222                     h-=20;
223                     w-=nw;
224                     l+=nw/2;
225                     t+=10;
226                     isBeyond=false;
227                 break;
228                 default :  //往上
229                     h+=20;
230                     w+=nw;
231                     l-=nw/2;
232                     t-=10;
233             };
234             if(!isBeyond){
235                 self.css(self.p,'height',h+txtH);
236                 self.css(self.p,'left',l);
237                 self.css(self.p,'width',w);
238                 self.css(self.p,'top',t);
239                 ev.preventDefault && ev.preventDefault();
240             }
241             return false;
242         }
243     };
244     //==============阻止冒泡
245     lightBox.stopPropagation=function(){
246         this.p.onclick=function(ev){
247             var e=window.event||ev;
248             e.stoppropagation ? e.stopPropagation() :(e.cancelBubble=true);
249         }
250     };
251     //=============隐藏
252     lightBox.hide=function(){
253         for(var i=0;i<arguments.length;i++){
254              arguments[i].style.display='none';
255         }
256     };
257     //=============显示
258     lightBox.show=function(){
259         for(var i=0;i<arguments.length;i++){
260              arguments[i].style.display='block';
261         }
262     };
263     //==============绑定事件
264     //params  o dom对象
265     //params  type 事件类型
266     //params  fn   事件函数
267     lightBox.addEvent=function(o,type,fn){
268         return o.addEventListener ? o.addEventListener(type,fn,false) : o.attachEvent('on'+type,fn);
269     };
270     //==============解除事件绑定
271     lightBox.removeEvent=function(o,type,fn){
272         return o.detachEvent ? o.detachEvent('on'+type,fn) : o.removeEventListener(type,fn);
273     };
274     //==============关闭
275     lightBox.closes=function(){
276         var self=this;
277         document.onclick=this.close.onclick=function(){
278             if(!self.isShow)return;
279             self.move(self.mask,{opacity:0},5,function(){
280                   document.body.removeChild(self.mask);
281             });
282             document.body.removeChild(self.p);
283             self.isShow=false;
284             delete self.p,self.prev,self.next,self.close,self.img,self.txt,self.btm,self.mask;
285             self.img.onload=null;
286         };
287     };
288     //==============点击上一张
289     lightBox.prevs=function(){
290         var self=this;
291         this.prev.onclick=function(){
292             var index=--self.index;
293             if(index<0){
294                 index=self.index=self.len-1;
295             };
296             self.clickSwitch(index);       
297          }
298     };
299 
300     //==============点击下一张
301     lightBox.nexts=function(){
302         var self=this;
303         this.next.onclick=function(){
304             var index=++self.index;
305             if(index>=self.len){
306                 index=self.index=0;
307             };
308             self.clickSwitch(index);
309         }
310     };
311     //================点击切换公有代码
312     lightBox.clickSwitch=function(i){
313         this.hide(this.prev,this.next,this.close,this.btm,this.img);
314         this.img.src=this.aImages[i].getAttribute(this.src);
315         this.txt.innerHTML=this.aImages[i].getAttribute(this.titletxt);
316     }
317 
318     //=============缓冲运动
319     lightBox.move=function(o,json,fx,fn){
320      var self=this;
321      o.timer && clearInterval(o.timer);
322      o.timer=setInterval(function(){
323       var bStop=true;
324             var cur=0;
325       for(var attr in json){
326          cur=attr=='opacity' ? parseInt(parseFloat(self.css(o,attr)).toFixed(2)*100):parseInt(self.css(o,attr));
327          var speed=(json[attr]-cur)/fx;
328          speed=speed>0?Math.ceil(speed):Math.floor(speed);
329          if(attr=='opacity'){
330             o.style.filter='alpha(opacity:'+(speed+cur)+')';
331             o.style.opacity=(speed+cur)/100;
332          }else{
333             o.style[attr]=(cur+speed)+'px';
334          };
335          if(cur!=json[attr]){
336            bStop=false;
337          };
338          if(bStop){
339            clearInterval(o.timer);
340            (typeof fn=='function')&&fn();
341          }
342       }
343      },30)
344     };
345     //=============获取元素样式
346     lightBox.css=function(o,attr,val){
347         if(arguments.length==2){
348             return o.currentStyle ? o.currentStyle[attr] : getComputedStyle(o,false)[attr];
349         }
350         else
351         {
352             o.style[attr]=val+'px';
353         }
354     };
355 
356     //=============获取页面高度
357     lightBox.getFullHeight=function(){
358         var sh=document.body.scrollHeight-4,
359             ch=document.documentElement.clientHeight;
360         return Math.max(sh,ch);
361     };
362   
363 
364 
365 
366 
367 var taotao=new myLightBox('cc'); 
368 //注意图片尺寸不能太小
369 taotao=null;
370 </script>
371 </body>
372 </html>