|
|
| Line 1: |
Line 1: |
| - | <!DOCTYPE html> | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| - | <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
| - | <meta charset="UTF-8">
| + | <head> |
| - | <title>js仿jquery-lightBox</title> | + | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
| - | <style>
| + | <title>CSS实现鼠标移动到图片，更换图片</title> |
| - | 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() 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() no-repeat 0 50px;}
| + | |
| - | .next{background: url() 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() no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
| + | |
| - | </style>
| + | |
| | </head> | | </head> |
| | + | <style type="text/css"> |
| | + | *{ margin:0; padding:0;} |
| | + | ul li{ list-style:none;} |
| | + | .nav{ width:800px; height:40px; margin:150px auto;} |
| | + | .nav ul li{ float:left; width:200px;} |
| | + | .nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/ |
| | + | .nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/ |
| | + | .nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/ |
| | + | </style> |
| | <body> | | <body> |
| - | <div class="lightBox"> | + | <div class="nav"> |
| - | <ul> | + | <ul> |
| - | <li><img src="/jscss/demoimg/wall_s1.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall1.jpg"></li>
| + | <li><a href="#"></a></li> |
| - | <li><img src="/jscss/demoimg/wall_s2.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall2.jpg"></li>
| + | <li><a href="#"></a></li> |
| - | <li><img src="/jscss/demoimg/wall_s3.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall3.jpg"></li>
| + | <li><a href="#"></a></li> |
| - | <li><img src="/jscss/demoimg/wall_s4.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall4.jpg"></li>
| + | </ul> |
| - | <li><img src="/jscss/demoimg/wall_s5.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall5.jpg"></li>
| + | |
| - | </ul> | + | |
| | </div> | | </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> | | </body> |
| | </html> | | </html> |
"
