js点击类图片预览

A_post

于 2012-06-25 18:04:46 发布

阅读量1k

点赞数

分类专栏： js 文章标签： function filter border div generator opera

js 专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
填入图片链接，自动加载并自适应图片大小，默认是最大400*400,数量可以多个
<input value=">
<input value=">
<input value=">
<button οnclick="preview()" >preview</button>
</BODY>
</HTML>
<script>
/*浏览图片类 */
var imagePre = function(){
   var d = document,ua = navigator.userAgent.toLowerCase(),ie = !(ua.indexOf("opera") > -1),
    $ = function(id){return d.getElementById(id)},
    ie6= !(ua.indexOf("opera") > -1) && ua.indexOf("msie") > -1,
    getWH = function(){
     var h = Math.max(d.documentElement.clientHeight,d.body.clientHeight),
      w = Math.max(d.documentElement.clientWidth,d.body.clientWidth);
     return {h:Math.max(h,d.body.scrollHeight),w:Math.max(w,d.body.scrollWidth)}
    },
    getTL = function(e){
     var t=0,l=0;
     do{
      t += e.offsetTop||0;
      l += e.offsetLeft||0;
     }while(e = e.offsetParent);
     return {t:t,l:l}
    },
    extend = function(t,s){
     for(var p in s){
      t[p] = s[p]
     }
    },
    rycDiv,selects,
    imgCache = {},
    options={
     current:0,
     size:400
    },
    Expo = {
     easeOut : function(t, b, c, d) {
       return Math.round((t==d)? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b);
     }
    },
    loadImg = function(sDiv){//加载图片
     imgCache[options.current] = this;
     var pre = options.size/Math.max(this.height,this.width);
     sDiv.style.cssText = 'top:50%;left:50%;position:absolute;z-index:200;padding:0;border:solid 1px #afafaf; background:#ffffff;width:50px;height:50px;margin:'+(-25+Math.max(d.documentElement.scrollTop,d.body.scrollTop))+'px '+(-25+Math.max(d.documentElement.scrollLeft,d.body.scrollLeft))+'px;'
     var h = (this.height*pre+50)-50,w=(this.width*pre+10)-50,t=0,T = this,sT=Math.max(d.documentElement.scrollTop,d.body.scrollTop),
      sL = Math.max(d.documentElement.scrollLeft,d.body.scrollLeft),sDivStyle = sDiv.style,duration=ie?30:10;
     (function(){
      if(t>duration){
       sDiv.innerHTML = '<img src="http://i3.6.cn/cvbnm/dc/4e/bd/e57740223e09f1bfd97085996ccc75b6.jpg" οnclick="imagePre.clear()" style="cursor:pointer;position:absolute;top:5px;left:'+(T.width*pre-10)+'px" /> \
      <img src="'+T.src+'" style="width:'+T.width*pre+'px;height:'+T.height*pre+'px;padding:0;margin:5px;"/> \
      <table width="100%" border="0" height="30"cellpadding="0" cellspacing="0" style="margin:-3px 0 3px 0;"><tr>'+(options.imgs?'<td><img src="http://i3.6.cn/cvbnm/8f/2a/bb/8eb610f58f107df2de97d1ebd68727fb.jpg" style="'+(options.current==0?'filter:alpha(opacity=30);opacity:0.3;':'')+'cursor:pointer;width:30px; height:30px; float:left; margin:3px 3px;" '+(options.current==0?'':'οnclick="imagePre.next(-1)"')+' /></td>':'')+
      '<td style="line-height:210%; text-align:center;">'+T.src.match(/\w+(\.\w+)?(?=\?)/)[0]+'</td>\
      '+(options.imgs?'<td><img src="http://i3.6.cn/cvbnm/3b/39/ab/34e8b8f923372e158993aa15e8cdff90.jpg"'+(options.current==options.imgs.length-1?'':'οnclick="imagePre.next(1)"')+' style="'+(options.current==options.imgs.length-1?'filter:alpha(opacity=30);opacity:0.3;':'')+'cursor:pointer;width:30px; height:30px; float:right; margin:3px 3px ;" /></td>':'')+'</tr></table>';
       sDiv = null;
       return;
      }else{
       var th = Expo.easeOut(t,50,h,duration),
        tw = Expo.easeOut(t++,50,w,duration);
       sDivStyle.height = th + 'px';
       sDivStyle.width = tw + 'px';
       sDivStyle.marginTop = -th/2 + sT + 'px';
       sDivStyle.marginLeft = -tw/2 + sL + 'px';
       setTimeout(arguments.callee,10)
      }
     })()
    },
    showImg=function(){
     var img = imgCache[options.current],
      sDiv = d.createElement('div');//中间显示的浮层
     sDiv.id = 'laySdiv';
     d.body.appendChild(sDiv);
     if(!img){
      sDiv.innerHTML = '<img src="http://i3.6.cn/cvbnm/15/38/0e/fb95569e5c61c0c7161da033ad863c91.jpg" style="z-index:201;width:48px;height:48px;"/>'
      sDiv.style.cssText = 'position:absolute;z-index:200;width:48px;height:48px;top:50%;left:50%;margin:'+(-24+Math.max(d.documentElement.scrollTop,d.body.scrollTop))+'px '+(-24+Math.max(d.documentElement.scrollLeft,d.body.scrollLeft))+'px;';
      img = new Image();
      var flag = 0;
      img.src = (options.path?options.path:options.imgs[options.current]) +'?time='+(+new Date);
      img.onload = function(){
       flag = 1;
       sDiv.innerHTML = '';
       loadImg.call(this,sDiv);
      }
      setTimeout(function(){
       if(!flag){
        alert('图片加载失败！');
        imagePre.clear()
       }
      },3000)
     }else{
      loadImg.call(img,sDiv);
     }

    };
   return {
    show:function(o){
     if(!rycDiv){
      rycDiv = d.createElement('div');
      rycDiv.style.display='none';
      rycDiv.id = 'rycDiv';
      d.body.insertBefore(rycDiv,d.body.firstChild);
     }
     //追加灰色背景
     var div = d.createElement('div'),wh = getWH();
     if(ie6){
      d.body.insertAdjacentHTML('afterBegin','<iframe id="layiframe" style="filter:alpha(opacity=0);position:absolute;top:0;left:0;width:'+wh.w+'px;height:'+wh.h+'px;z-index:99" ></iframe>')
      selects = d.getElementsByTagName('select');
      for(var i=0,ci;ci=selects[i];i++){
       var tl = getTL(ci),w = ci.offsetWidth,h = ci.offsetHeight;
       ci.style.visibility = 'hidden'
       d.body.insertAdjacentHTML('afterBegin','<div id=layselect'+i+' style="padding:1px 1px 0 2px; position:absolute;top:'+tl.t+'px;left:'+tl.l+'px;width:'+(w-4)+'px;height:'+(h-2)+'px;border:1px solid #c0c0c0;z-index:99;background:url(/images/sel.jpg) no-repeat 2px right;"> '+ci.options[ci.selectedIndex].text+'</div>');
      }
     }
     div.style.cssText = "z-index:100;border:0;position:absolute;top:0;left:0;filter:alpha(opacity=60);opacity:0.6;width:"+wh.w+"px;height:"+wh.h+"px;background:#c0c0c0";
     div.id = 'layDiv'
     d.body.insertBefore(div,d.body.firstChild);
     extend(options,o||{});
     showImg();

    },
    clear:function(fn){
     if(ie6){
      for(var i = 0,ci;ci=selects[i];i++){
       rycDiv.appendChild($('layselect'+i));
       ci.style.visibility = 'visible'
      }
      rycDiv.appendChild($('layiframe'));
     }
     rycDiv.appendChild($('layDiv'));
     rycDiv.appendChild($('laySdiv'));
     rycDiv.innerHTML = '';
     fn&&fn();
     options ={
      current:0,
      size:400
     }
     d.body.removeChild(rycDiv);
     rycDiv = null;
    },
    next:function(p){
     options.current += p;
     rycDiv.appendChild($('laySdiv'));
     rycDiv.innerHTML = '';
     showImg();
    }
   }
}()

/*调用*/
for(var i=0,ci,urls=[],inputs = document.getElementsByTagName('input');ci=inputs[i];i++){
urls[i] = ci.value;
}
function preview(){
imagePre.show({imgs:urls})
}

</script>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。