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,width: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>
浙公網安備 33010602011771號