写了个图片预览
1.解决了在ie6下浮层不能盖住select的问题
2.对图进行等比缩放
添加了图片加载的loading过程，添加了缓存，图片只加载一次，下次再打开时，调用缓存的内容，
修改图片的调用方式，可以只给链接，自动加载，并且自适应图片大小[/i]
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>
<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 ο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>
填入图片链接，自动加载并自适应图片大小，默认是最大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 ο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>
loading图差点意思只能上传jpg所以不动，可以自己改了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
