写了个图片预览

chenxueyong

浏览: 342262 次
性别:
来自: 武汉

最近访客更多访客>>

crazybaby94

lam

harryanson

海波TIC

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

IE Opera C C++C#

写了个图片预览

1.解决了在ie6下浮层不能盖住select的问题
2.对图进行等比缩放
添加了图片加载的loading过程，添加了缓存，图片只加载一次，下次再打开时，调用缓存的内容，
修改图片的调用方式，可以只给链接，自动加载，并且自适应图片大小[/i]

<!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="http://i3.6.cn/cvbnm/65/47/b6/e053ffbec660ce2b5d9aeed4673fdf8b.jpg"/>
<input value="http://i3.6.cn/cvbnm/8d/3b/ca/09fe657d72664b2bbf70a2ae60dc4916.jpg"/>
<input value="http://i3.6.cn/cvbnm/6f/66/b5/252c5aaf43b05c7dbf6829ac7374f689.jpg"/>
<button onclick="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" onclick="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?'':'onclick="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?'':'onclick="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>

loading图差点意思只能上传jpg所以不动，可以自己改了

分享到：

图表控件 | ExtJs grid使用详细［转］

2009-03-13 14:15
浏览 1276
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论