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>