Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE HTML>
+
<!DOCTYPE html>
-
<html lang="en-US">
+
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<head>
+
<meta charset="UTF-8">
<meta charset="UTF-8">
-
<title>JS图片放大展示效果</title>
+
<title>js仿jquery-lightBox</title>
<style>
<style>
-
* {margin:0; padding:0}
+
body,ul,li,p,img{margin: 0;padding: 0}
-
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
+
html,body{background: #fff;}
-
ul, li {list-style:none}
+
.lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
-
.cf {zoom:1}
+
.lightBox ul{width: 750px}
-
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
+
.lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline;}
-
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
+
.lightBox li img{height: 80px;width: 140px}
-
#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
+
/**弹出层样式***/
-
#banner ul {}
+
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
-
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
+
.popup{background:#fff url() no-repeat center;border: 10px solid #fff;position: absolute;z-index: 2;;overflow:-hidden;width: 320px;height: 240px;}
-
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
+
.popup img{height: auto;width: auto;}
-
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
+
.btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
-
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
+
.prev{left: 0;background: url() no-repeat 0 50px;}
-
.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
+
.next{background: url() no-repeat  right 50px;}
-
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
+
.popupBottom{position: relative;z-index: 3;margin-top:4px}
-
#goUp:hover {background-position:-34px 4px}
+
.popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
-
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
+
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url() no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
-
#goDown:hover {background-position:-34px -52px}
+
</style>
</style>
</head>
</head>
<body>
<body>
-
<div class="wrap">
+
<div class="lightBox">
-
<div id="banner">
+
<ul>                      
-
<ul class="cf">
+
<li><img src="/jscss/demoimg/wall_s1.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall1.jpg"></li>
-
<li><span></span><img src="/jscss/demoimg/wall1.jpg" alt="" /></li>
+
<li><img src="/jscss/demoimg/wall_s2.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall2.jpg"></li>
-
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
+
<li><img src="/jscss/demoimg/wall_s3.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall3.jpg"></li>
-
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
+
<li><img src="/jscss/demoimg/wall_s4.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall4.jpg"></li>
-
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
+
<li><img src="/jscss/demoimg/wall_s5.jpg" _title="仿jquery-lightBox" _src="/jscss/demoimg/wall5.jpg"></li>
-
<li><span></span><img src="/jscss/demoimg/wall5.jpg" alt="" /></li>
+
</ul>
-
<li><span></span><img src="/jscss/demoimg/wall6.jpg" alt="" /></li>
+
-
<li><span></span><img src="/jscss/demoimg/wall7.jpg" alt="" /></li>
+
-
<li><span></span><img src="/jscss/demoimg/wall8.jpg" alt="" /></li>
+
-
<li><span></span><img src="/jscss/demoimg/wall9.jpg" alt="" /></li>
+
-
<li><span></span><img src="/jscss/demoimg/wall10.jpg" alt="" /></li>
+
-
</ul>
+
-
<div class="btn_wrap">
+
-
<a href="javascript:;" id="goUp">向上走着</a>
+
-
<a href="javascript:;" id="goDown">向下走着</a>
+
-
</div>
+
-
</div>
+
</div>
</div>
-
<script type="text/javascript">
+
<script>
-
var JSHELPER = {
+
/*
-
initi: function() {
+
*  author:涛涛
-
},
+
*  date:2013/8/22
-
animate: function(obj, attrList, callback) {
+
*/
-
clearInterval(obj.timer);
+
(function(win){
-
obj.timer = setInterval(function() {
+
    function myLightBox(elem,isZoom,src,titletxt){
-
var isStop = true;
+
        this.elem=typeof elem=='object' ? elem : this.$('lightBox')[0];
-
for(var attr in attrList) {
+
        this.isZoom=typeof isZoom=='undefined' ? true : isZoom;
-
var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
+
        this.src=src || '_src';
-
var speed = (attrList[attr] - curAttr) / 8;
+
        this.titletxt=titletxt || '_title';
-
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
+
        this.isShow=false;
-
if(attr === "opacity") {
+
        this.index=0;
-
obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
+
        this.aImages=this.elem.getElementsByTagName('img');
-
obj.style.opacity = (curAttr + speed) / 100;
+
        this.len=this.aImages.length;
-
} else {
+
        this.showPopup();
-
obj.style[attr] = curAttr + speed + "px";
+
    };
-
}
+
    var lightBox=myLightBox.prototype;
-
curAttr != attrList[attr] && (isStop = false);
+
    //显示弹出层
-
}
+
    lightBox.showPopup=function(){
-
if(isStop) {
+
        var self=this,
-
clearInterval(obj.timer);
+
        img=this.aImages;
-
!!callback && callback();
+
        for(var i=0;i<this.len;i++){
-
}
+
            img[i].index=i;
-
}, 15);
+
            img[i].onclick=function(){
-
},
+
                self.index=this.index;
-
$: function(params) {
+
                self.createPopup(this.getAttribute(self.src),this.getAttribute(self.titletxt));
-
switch (params.charAt(0)) {
+
            }
-
case "#":
+
        }
-
return document.getElementById(params.substring(1));
+
    };
-
break;
+
    //class获取元素
-
case ".":
+
    lightBox.$=function(s,t,p){
-
return this.getByClass(document, params.substring(1));
+
    var aElement=(p||document).getElementsByTagName(t||'*'),
-
default:
+
        reg=new RegExp('(^|\\s)'+s+'(\\s|$)'),
-
return document.getElementsByTagName(params);
+
        aResult=[];
-
}
+
    for(var i=0;i<aElement.length;i++){
-
},
+
      reg.test(aElement[i].className) && aResult.push(aElement[i]);
-
getStyle: function(obj, attr) {
+
    };
-
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
+
    return aResult;
-
},
+
    };
-
getByClass: function(pn, cn) {
+
 
-
var ae = pn.getElementsByTagName("*"),  
+
    //创建弹出层展示
-
rent = [],
+
    //params  src  图片路径
-
re = new RegExp('\\b' + cn + '\\b', 'i');
+
    //params title  显示文字
-
for(var i = 0, len = ae.length; i < len; i++) {
+
    lightBox.createPopup=function(src,title){
-
ae[i].className.search(re) != -1 && rent.push(ae[i]);
+
        var self=this,
-
}
+
        oPopup=document.createElement('div'),//弹出层外框
-
return rent;
+
    oMask=document.createElement('div'),//遮罩
-
}
+
    oPrev=document.createElement('div'),//上按钮
-
};
+
    oNext=document.createElement('div'),//下按钮
-
window.onload = function() {
+
    oBottom=document.createElement('div'),//底部盒子
-
var btnDown = JSHELPER.$("#goDown"),
+
    oTitle=document.createElement('div'),//底部文字盒子
-
btnUp = JSHELPER.$("#goUp"),
+
    oClose=document.createElement('div'),//关闭
-
wrap = JSHELPER.$("#banner"),
+
    oImg=document.createElement('img'),//图片
-
liList = wrap.children[0].children,
+
        vw=document.documentElement.clientWidth,
-
len = liList.length;
+
        vh=document.documentElement.clientHeight;
-
wrap.style.overflow = "visible";
+
    oMask.className='mask';
-
//设置 left 和  top
+
    oPopup.className='popup';
-
for(var i = 0; i < len; i++) {
+
    oPrev.className='prev btn';
-
liList[i].style.left = liList[i].offsetLeft + "px";
+
    oNext.className='next btn';
-
if(i >= 12) {
+
    oBottom.className='popupBottom';
-
liList[i].style.top = "400px";
+
    oTitle.className='popupTitle';
-
} else {
+
    oClose.className='popupClose';
-
liList[i].style.top = liList[i].offsetTop + "px";
+
    oTitle.innerHTML=title || '';
-
}
+
        oPopup.style.margin='0';
-
}
+
        oPopup.style.left=(vw-320)/2+'px';
-
//添加 position:absolute
+
        oPopup.style.top=(vh-240)/2+'px';
-
for(var i = 0; i < len; i++) {
+
        oMask.style.height=this.getFullHeight()+'px';
-
liList[i].style.position = "absolute";
+
        this.hide(oPrev,oNext,oBottom,oClose,oImg);
-
}
+
        oBottom.appendChild(oClose);
-
//把容器外的设置为透明
+
        oBottom.appendChild(oTitle);
-
for(var i = 8; i < len; i++) {
+
        oPopup.appendChild(oPrev);
-
liList[i].style.filter = "alpha(opacity=0)";
+
        oPopup.appendChild(oNext);
-
liList[i].style.opacity = 0;
+
        oPopup.appendChild(oImg);
-
liList[i].style.display = "none";
+
        oPopup.appendChild(oBottom);
-
}
+
        document.body.appendChild(oMask);
-
+
        document.body.appendChild(oPopup);
-
var now = 0;
+
    oImg.onload=function(){
-
//上一个
+
            self.show(this,oClose,oBottom,oNext,oPrev);
-
btnUp.onclick = function() {
+
            this.style.height='auto';
-
if(now == 0) {
+
            this.style.width='auto';
-
return;
+
            var oldw=self.css(oPopup,'width'),oldh=self.css(oPopup,'height');
-
}
+
            oPopup.style.height='auto';
-
var i = now + 8;
+
            oPopup.style.width='auto';
-
i = i >= len ? (len-1) : i;
+
            oPopup.style.opacity=0;
-
var timerDo = setInterval(function() {
+
            oPopup.style.filter='alpha(opacity:0)';
-
if(i < now) {
+
            var h=oPopup.clientHeight,w=oPopup.clientWidth;
-
liList[i].style.display = "block";
+
            oPopup.style.height=oldh;
-
JSHELPER.animate(liList[i], {top: 0, opacity: 100});
+
            oPopup.style.width=oldw;
-
} else if(i < now + 4) {
+
            self.hide(oBottom,oImg);
-
JSHELPER.animate(liList[i], {top: 200});
+
            self.move(oPopup,{opacity:100,height:h,width:w,left:parseInt((vw-w)/2),top:parseInt((vh-h)/2)},5,function(){
-
} else {
+
                self.show(oBottom,oImg);
-
JSHELPER.animate(liList[i], {top: 400, opacity: 0});
+
                oImg.style.width='100%';
-
}
+
                self.isShow=true;
-
i--;
+
            });
-
if( i == now - 5 ) {
+
    };
-
now -= 4;
+
        self.move(oMask,{opacity:60},5);
-
for(var m = len-1; m > now+7; m--) {
+
        oImg.src=src;
-
liList[m].style.display = "none";
+
        this.prev=oPrev;
-
}
+
        this.next=oNext;
-
clearInterval(timerDo);
+
        this.close=oClose;
-
}
+
        this.img=oImg;
-
}, 50);
+
        this.txt=oTitle;
-
};
+
        this.btm=oBottom;
-
//下一个
+
        this.p=oPopup;
-
btnDown.onclick = function() {
+
        this.mask=oMask;
-
if(now >= len - 8) {
+
        this.nexts();
-
return;
+
        this.prevs();
-
}
+
        this.stopPropagation();
-
var i = now;
+
        this.closes();
-
var timerDo = setInterval(function() {
+
        this.isZoom && this.mouseWheels();
-
if(i < now + 4) {
+
        this.resizefn();
-
JSHELPER.animate(liList[i], {top: -200, opacity: 0});
+
    };
-
} else if(i < now + 8) {
+
    //============重置窗口大小
-
JSHELPER.animate(liList[i], {top: 0});
+
    lightBox.resizefn=function(){
-
} else {
+
        if(!this.p)return;
-
liList[i].style.display = "block";
+
        var self=this;
-
JSHELPER.animate(liList[i], {top: 200, opacity: 100});
+
        this.addEvent(window,'resize',function(){
-
}
+
            if(!self.p)return;
-
i++;
+
            var viw=self.getWinSize()[0],
-
if( i == now + 12 ) {
+
            vih=self.getWinSize()[1],
-
now += 4;
+
            p=self.p,ms=self.mask,
-
for(var m = 0; m < now; m++) {
+
            h=p.offsetHeight,w=p.offsetWidth;
-
liList[m].style.display = "none";
+
 
-
}
+
            self.css(p,'left',(viw-w)/2);
-
clearInterval(timerDo);
+
            self.css(p,'top',(vih-h)/2);
-
}
+
            self.css(ms,'height',Math.max(h,vih));
-
}, 50);
+
            self.css(ms,'width',Math.max(w,viw));
-
};
+
        })
-
+
    };
-
//放大镜
+
    //===============获取窗口大小
-
for(var i = 0; i < len; i++) {
+
    lightBox.getWinSize=function(){
-
(function(i) {
+
        var d=document.documentElement;
-
liList[i].children[0].onmouseover = function() {
+
        return [d.clientWidth,d.clientHeight];
-
liList[i].style.zIndex = 100;
+
    };
-
JSHELPER.animate(liList[i].children[0], {width:280, height: 280, left: -50, top: -50});
+
    //==============鼠标滚轮
-
JSHELPER.animate(liList[i].children[1], {width:300, height: 300, left: -50, top: -50});
+
    lightBox.mouseWheels=function(){
-
};
+
        this.addEvent(document,'mousewheel',wheel);
-
liList[i].children[0].onmouseout = function() {
+
        this.addEvent(document,'DOMMouseScroll',wheel);
-
liList[i].style.zIndex = 10;
+
        var self=this,isBeyond=false;
-
JSHELPER.animate(liList[i].children[0], {width:170, height: 170, left: 5, top: 5});
+
 
-
JSHELPER.animate(liList[i].children[1], {width:190, height: 190, left: 5, top: 5});
+
        function wheel(e){
-
};
+
            var ev=window.event||e,flag=true,
-
})(i);
+
            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>
</script>
</body>
</body>
</html>
</html>

Revision as of 08:27, 6 September 2014

<!DOCTYPE html> js仿jquery-lightBox

Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest"