漂亮的弹出层图片+图片缓冲滚动效果，已封装（可修改，有注释）

晕限制字数放不下了缓冲滚动效果放到18楼去了呵呵
呵呵不好意思前段时间比较忙现在加上了双击关闭效果了
弹出层图片展示
可调整背景色，透明度，边框大小，标题大小
鼠标可移动位置 ESC键盘退出。
可实例化多容器图片效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="image/x-icon" href="" rel="shortcut icon"> <link href="template.css" type="text/css" rel="stylesheet" media="screen"> <script type="text/javascript"> function div(id){return document.getElementById(id);} var ie=!-[1,]; var Obj={ Create:function(id,id2,ele){ var obj=document.createElement(ele); obj.setAttribute("id",id2); div(id).appendChild(obj); }, del:function(id){ var obj=div(id); obj.parentNode.removeChild(obj); }, inner:function(id,text){ div(id).innerHTML=text; }, css:function(){ this.cssinfo(); var obj=div(this.css.id); with(obj.style){ ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:""); this.css.background!=undefined?background=this.css.background:""; this.css.width!=undefined?width=this.css.width:""; this.css.height!=undefined?height=this.css.height:""; this.css.position!=undefined?position=this.css.position:""; this.css.left!=undefined?left=this.css.left:""; this.css.top!=undefined?top=this.css.top:""; this.css.bottom!=undefined?bottom=this.css.bottom:""; this.css.padding!=undefined?padding=this.css.padding:""; this.css.margin!=undefined?margin=this.css.margin:""; this.css.filter!=undefined?filter=this.css.filter:""; this.css.opacity!=undefined?opacity=this.css.opacity:""; this.css.zIndex!=undefined?zIndex=this.css.zIndex:""; this.css.border!=undefined?border=this.css.border:""; this.css.overflow!=undefined?overflow=this.css.overflow:""; this.css.display!=undefined?display=this.css.display:""; this.css.textAlign!=undefined?textAlign=this.css.textAlign:""; this.css.fontSize!=undefined?fontSize=this.css.fontSize:""; this.css.color!=undefined?color=this.css.color:""; this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:""; this.css.cursor!=undefined?cursor=this.css.cursor:""; this.css.lineHeight!=undefined?lineHeight=this.css.lineHeight:""; } }, oEventX:function(e){ var e=window.event?window.event:e; return e.clientX; }, oEventY:function(e){ var e=window.event?window.event:e; return e.clientY; } } var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY; Obj.css.prototype.cssinfo=function(){ this.css=css; return this; } </script> <style> *{margin:0;padding:0;list-style:inside none none;} html{height:100%;overflow:hidden;} body{background:#667594;font-size:12px;font-family:"宋体";height:100%;overflow:hidden;} img{border:none;} .imglist{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #fef;padding:10px 0;width:100%;} .imglist ul{overflow:hidden;zoom:1;} .imglist li{float:left;margin:0 10px;height:100%;} .imglist li a{display:block;line-height:0;font-size:0;border:1px solid #fff;padding:1px;} .imglist li img{width:100px;} .alt{color:#fff;display:block;width:150px;height:200px;text-align:center;margin:300px auto 0 auto;font-size:14px;font-weight:bold;line-height:30px;} .imglist2{bottom:150px;} </style> </head> <body id="ibody"> <span class="alt">鼠标按住边框可拖动 ESC键关闭</span> <div class="imglist" id="imglist"> <ul> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_1.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static4.images.tpzj.com/images/upload/2009/20091026/423/423592/423592_10.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_25.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static10.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_27.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static9.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_28.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static0.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_56.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> </ul> </div> <div class="imglist imglist2" id="imglist2"> <ul> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_1.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static4.images.tpzj.com/images/upload/2009/20091026/423/423592/423592_10.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_25.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static10.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_27.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static9.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_28.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static0.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_56.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> </ul> </div> <script> function iShow(objid){ this.iControl="1" /*1为图片大小自适应*/ this.iControlSize=0.8 /*最大图片大小占可视区域比例(此项需要this.iControl=1)*/ this.ibody="ibody"; /*bodyid*/ this.bgid="container" /*背景id*/ this.borderid="wrap"; /*边框id*/ this.boxid="imgwrap"; /*图像容器id*/ this.listid=objid; /*图像列表id*/ this.borderSize=10; /*边框大小*/ this.titleSize=22; /*标题区域大小*/ this.alpha=3; /*透明度---1~10*/ this.bgc="000" /*背景色*/ /*默认弹出框样式*/ this.w=420; this.h=226; this.c="#fff"; this.w1=this.w+this.borderSize*2; this.h1=this.h+this.borderSize*2+this.titleSize; this.c1="#eee"; } iShow.prototype.iMouse=function(){ /*鼠标事件*/ var iDel=this.iDel; var iLoad=this.iLoad,iStyle=this.iStyle; var ele={box:this.boxid,bd:this.borderid,bdSize:this.borderSize*2,tSize:this.titleSize,iCount:this.iCount,iControl:this.iControl,iControlSize:this.iControlSize} var eles=div(this.listid).getElementsByTagName("a"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ iStyle(iDel); iLoad(this,ele); return false; } } } iShow.prototype.iStyle=function(iDel){ /*对象初始化*/ this.iShow.call(this) Create(this.ibody,this.bgid,"div"); Create(this.ibody,this.borderid,"div"); Create(this.ibody,this.boxid,"div"); css={id:this.bgid,width:"100%",height:"100%",opacity:0.1*this.alpha,background:"#"+this.bgc,filter:"alpha(opacity="+10*this.alpha+")",position:"absolute",top:0,left:0} new Obj.css; css={id:this.borderid,background:this.c1,width:this.w1+"px",height:this.h1+"px",position:"absolute",margin:-this.h1/2+"px "+"0 0 "+-this.w1/2+"px",left:"50%",top:"50%",opacity:0.2,overflow:"hidden",filter:"alpha(opacity=20)"} new Obj.css; css={id:this.boxid,textAlign:"center",background:this.c,width:this.w+"px",height:this.h+"px",position:"absolute",margin:-(this.h+this.titleSize)/2+"px "+"0 0 "+-this.w/2+"px",left:"50%",top:"50%"} new Obj.css; inner(this.boxid,"<span style='display:block;margin-top:50px;color:#f30'>图片读取可能比较慢，请稍后……</span>") document.onkeydown=function(e){ var e=e?e:window.event; if(e.keyCode=="27"){ iDel(); } } document.ondblclick=function(){iDel();this.ondblclick=''}; /*移动*/ var obj1=div(this.borderid); var obj2=div(this.boxid); var Site=imgshow.Site; var Move=imgshow.Move; obj1.onmousedown=function(){Site(arguments[0],obj1,obj2);this.style.cursor="move";document.onmousemove=function(){Move(arguments[0],obj1,obj2)};} document.onmouseup=function(){this.onmousemove="";obj1.style.cursor=""} } iShow.prototype.iLoad=function(e,ele){ var image=new Image(); image.src=e.href; if(image.complete){Reset();}else{ image.onload=function(){Reset();} } function Reset(){ var iw0=image.width,ih0=image.height; var W0=iw0+ele.bdSize,H0=ih0+ele.bdSize+ele.tSize; function curSize(){ css={id:borderid,width:W0+"px",height:H0+"px",left:"50%",top:"30px",margin:"0 0 0 "+-W0/2+"px"}; new Obj.css; css={id:boxid,width:iw0+"px",height:ih0+"px",left:"50%",top:"30px",margin:ele.tSize/2+"px 0 0 "+-(W0-ele.bdSize)/2+"px"}; new Obj.css; } var Size=(image.width>document.body.clientWidth*ele.iControlSize || image.height>document.body.clientHeight*ele.iControlSize)?true:false if(ele.iControl=="1" && Size==true){ var iInfo=ele.iCount(image,ele.iControlSize); image.width=iInfo.iW,image.height=iInfo.iH; } var bt1="<a href='#' style='float:right;color:#fff;margin-left:20px;text-decoration:none;' id='iZoom_cur'>原图大小</a>" var text1="<img src='"+image.src+"' style='width:100%' alt='"+e.title+"' />"; var text2="<span id='imgshow_title'>"+bt1+e.title+"</span>" var text=text1+text2; var W=image.width+ele.bdSize,H=image.height+ele.bdSize+ele.tSize; css={id:borderid,width:W+"px",height:H+"px",left:"50%",top:"50%",margin:-H/2+"px"+" 0 0 "+-W/2+"px"}; new Obj.css; css={id:boxid,width:image.width+"px",height:image.height+"px",left:"50%",top:"50%",margin:-(image.height+ele.tSize)/2+"px"+" 0 0 "+-image.width/2+"px"}; new Obj.css; inner(ele.box,text); css={id:"imgshow_title",left:0,lineHeight:"22px",overflow:"hidden",color:"#fff"} new Obj.css; div("iZoom_cur").onclick=curSize; } } iShow.prototype.iCount=function(e,f){ var doc=document.body,W=doc.clientWidth*f,H=doc.clientHeight*f; var obj=e.width/W>e.height/H?{iW:W,iH:e.height*W/e.width,iType:1}:{iW:e.width*H/e.height,iH:H,iTyle:2}; return obj; } iShow.prototype.Site=function(e,obj1,obj2){ this.X=oX(arguments[0]); this.Y=oY(arguments[0]); this.oLeft1=obj1.offsetLeft; this.oTop1=obj1.offsetTop; this.oLeft2=obj2.offsetLeft; this.oTop2=obj2.offsetTop; } iShow.prototype.Move=function(e,obj1,obj2){ var X=oX(arguments[0])-this.X,Y=oY(arguments[0])-this.Y; var Left1=this.oLeft1+X,Top1=this.oTop1+Y,Left2=this.oLeft2+X,Top2=this.oTop2+Y; css={id:obj1.id,left:Left1+"px",top:Top1+"px",margin:0} new Obj.css; css={id:obj2.id,left:Left2+"px",top:Top2+"px",margin:0} new Obj.css; } iShow.prototype.iDel=function(){ del(boxid);del(borderid);del(bgid); document.onkeydown=''; } var imgshow=new iShow("imglist"); imgshow.iMouse(); var imgshow2=new iShow("imglist2"); imgshow2.iMouse(); </script> </body> </html>
提示：您可以先修改部分代码再运行

ie6下面拖动问题解决了，刚刚又检查了一下esc键盘原来是世界之窗占用了这个功能键 ie拖动保存下来就没问题了

[ 本帖最后由 lifeseato 于 2010-6-9 16:11 编辑 ]

作者: lifeseato 发布时间: 2010-05-29

图片都把我屏幕遮了,都不知道点哪里关闭...

作者: 8yong8 发布时间: 2010-05-29

拖动很不利索，关闭图层用Esc也不太习惯。

作者: yamanyin 发布时间: 2010-05-29

MM不错，呵呵~~
就是拖动比较卡，上下拖还成，向左基本不能，向右。。。能拖一点

ESC不管用，IE6

作者: tmulmt 发布时间: 2010-05-29

背景框透明内容不透明，能简单解释实现方法么？

[ 本帖最后由 kubau0 于 2010-5-29 21:17 编辑 ]

作者: kubau0 发布时间: 2010-05-29

学习学习..........

作者: ycq312 发布时间: 2010-05-29

之前用FF很流畅不知道ie哪么卡。。。
奇怪了真的捕捉不到ESC的keyCode...嘿嘿不好意思晚上回来再完善一下~~

5楼的朋友要兼容浏览器的话背景透明内容不透明我只知道两种办法建立两个同级图层和用png图片实现暂时没见过其他办法了

作者: lifeseato 发布时间: 2010-05-29

漂亮，

作者: brotherteam 发布时间: 2010-05-30

很不错，学习一下

作者: shbijiben 发布时间: 2010-05-30

为么事不搞个关闭按钮？

作者: ornet 发布时间: 2010-05-31

呵呵本来打算看看有没有什么漂亮的按钮图片加上去不过没找到
直接加上关闭的链接好了

作者: lifeseato 发布时间: 2010-05-31

谢谢分享,拿回去研究研究

作者: sggtong 发布时间: 2010-05-31

opera下，有的图片第一次出不来。

作者: shayixin 发布时间: 2010-06-01

很漂亮。但是点原图就把我屏幕拉住了。。不知道点哪里关闭。。最好把关闭按钮加在图片的右上角。或者是点屏幕的其它空白处关闭。

作者: wangsdong 发布时间: 2010-06-03

MM 很漂亮呢~~~

作者: carkey712 发布时间: 2010-06-03

莫名奇妙就关闭了

作者: beryl2008 发布时间: 2010-06-03

印证了一句话女人是老虎

作者: cielkong 发布时间: 2010-06-04

因为小图片滚动用的是gif动画 ie6下测试不够流畅大家可以换个静态图片或者用ff来测试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link type="image/x-icon" href="" rel="shortcut icon"> <link href="template.css" type="text/css" rel="stylesheet" media="screen"> <script type="text/javascript"> function div(id){return document.getElementById(id);} var ie=!-[1,]; var Obj={ Create:function(id,id2,ele){ var obj=document.createElement(ele); obj.setAttribute("id",id2); div(id).appendChild(obj); }, del:function(id){ var obj=div(id); obj.parentNode.removeChild(obj); }, inner:function(id,text){ div(id).innerHTML=text; }, css:function(){ this.cssinfo(); var obj=div(this.css.id); with(obj.style){ ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:""); this.css.background!=undefined?background=this.css.background:""; this.css.width!=undefined?width=this.css.width:""; this.css.height!=undefined?height=this.css.height:""; this.css.position!=undefined?position=this.css.position:""; this.css.left!=undefined?left=this.css.left:""; this.css.top!=undefined?top=this.css.top:""; this.css.bottom!=undefined?bottom=this.css.bottom:""; this.css.padding!=undefined?padding=this.css.padding:""; this.css.margin!=undefined?margin=this.css.margin:""; this.css.filter!=undefined?filter=this.css.filter:""; this.css.opacity!=undefined?opacity=this.css.opacity:""; this.css.zIndex!=undefined?zIndex=this.css.zIndex:""; this.css.border!=undefined?border=this.css.border:""; this.css.overflow!=undefined?overflow=this.css.overflow:""; this.css.display!=undefined?display=this.css.display:""; this.css.textAlign!=undefined?textAlign=this.css.textAlign:""; this.css.fontSize!=undefined?fontSize=this.css.fontSize:""; this.css.color!=undefined?color=this.css.color:""; this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:""; this.css.cursor!=undefined?cursor=this.css.cursor:""; this.css.lineHeight!=undefined?lineHeight=this.css.lineHeight:""; } }, oEventX:function(e){ var e=window.event?window.event:e; return e.clientX; }, oEventY:function(e){ var e=window.event?window.event:e; return e.clientY; } } var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY; Obj.css.prototype.cssinfo=function(){ this.css=css; return this; } </script> <style> *{margin:0;padding:0;list-style:inside none none;} .imgs{line-height:0;font-size:0;display:block} html{height:100%;overflow:hidden;} body{background:#667594;font-size:12px;font-family:"宋体";height:100%;overflow:hidden;} img{border:none;} .imglist{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #fef;padding:10px 0;width:100%;} .imglist ul{overflow:hidden;zoom:1;} .imglist li{float:left;margin:0 10px;height:100%;} .imglist li a{display:block;line-height:0;font-size:0;border:1px solid #fff;padding:1px;} .imglist li img{width:100px;} .alt{color:#fff;display:block;width:150px;height:200px;text-align:center;margin:300px auto 0 auto;font-size:14px;font-weight:bold;line-height:30px;} .imgshow{padding:10px;border:1px solid #e0e0e0;overflow:hidden;width:460px;margin:20px auto} .imgshow img{width:80px;height:60px;} .imgshow li{float:left;margin-right:10px;} .imgshow .imgs{border:1px solid #e0e0e0;padding:1px;} .imgshow ul{overflow:hidden;zoom:1;margin-right:-10px;} .imgshow .button{text-align:center;} .imgshow .button span{margin:0 10px;text-decoration:none;color:#fff;cursor:pointer} </style> </head> <body id="ibody"> <div class="imgshow" id="imgshow"> <ul id="images"> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> <li><a href="http://hiphotos.baidu.com/photoviewer/pic/item/a6304ea952e4aa90cb130cca.jpg" class="imgs"><img src="http://blog.ikaka.com/avatars/upload/117/5855/1171133.gif" alt="" /></a></li> </ul> <div class="button"><span id="btl">上一页</span><span id="btr">下一页</span></div> </div> <span class="alt">鼠标按住边框可拖动 ESC键关闭</span> <div class="imglist" id="imglist"> <ul> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_1.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static4.images.tpzj.com/images/upload/2009/20091026/423/423592/423592_10.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static6.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_25.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static10.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_27.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static9.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_28.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> <li><a href="http://static0.images.tpzj.com/images/upload/2009/20091026/423/423592/s600/423592_56.jpg" title="哇！美女"><img src="http://www.wwf.com.cn/bbs/attachments/upload1/1119105250_capt.lhr10203210830.pakistan_lhr102.jpg" alt="" /></a></li> </ul> </div> <script> function iShow(objid){ this.iControl="1" /*1为图片大小自适应*/ this.iControlSize=0.8 /*最大图片大小占可视区域比例(此项需要this.iControl=1)*/ this.ibody="ibody"; /*bodyid*/ this.bgid="container" /*背景id*/ this.borderid="wrap"; /*边框id*/ this.boxid="imgwrap"; /*图像容器id*/ this.listid=objid; /*图像列表id*/ this.borderSize=10; /*边框大小*/ this.titleSize=22; /*标题区域大小*/ this.alpha=3; /*透明度---1~10*/ this.bgc="000" /*背景色*/ /*默认弹出框样式*/ this.w=420; this.h=226; this.c="#fff"; this.w1=this.w+this.borderSize*2; this.h1=this.h+this.borderSize*2+this.titleSize; this.c1="#eee"; } iShow.prototype.iMouse=function(){ /*鼠标事件*/ var iDel=this.iDel; var iLoad=this.iLoad,iStyle=this.iStyle; var ele={box:this.boxid,bd:this.borderid,bdSize:this.borderSize*2,tSize:this.titleSize,iCount:this.iCount,iControl:this.iControl,iControlSize:this.iControlSize} var eles=div(this.listid).getElementsByTagName("a"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ iStyle(iDel); iLoad(this,ele); return false; } } } iShow.prototype.iStyle=function(iDel){ /*对象初始化*/ this.iShow.call(this) Create(this.ibody,this.bgid,"div"); Create(this.ibody,this.borderid,"div"); Create(this.ibody,this.boxid,"div"); css={id:this.bgid,width:"100%",height:"100%",opacity:0.1*this.alpha,background:"#"+this.bgc,filter:"alpha(opacity="+10*this.alpha+")",position:"absolute",top:0,left:0} new Obj.css; css={id:this.borderid,background:this.c1,width:this.w1+"px",height:this.h1+"px",position:"absolute",margin:-this.h1/2+"px "+"0 0 "+-this.w1/2+"px",left:"50%",top:"50%",opacity:0.2,overflow:"hidden",filter:"alpha(opacity=20)"} new Obj.css; css={id:this.boxid,textAlign:"center",background:this.c,width:this.w+"px",height:this.h+"px",position:"absolute",margin:-(this.h+this.titleSize)/2+"px "+"0 0 "+-this.w/2+"px",left:"50%",top:"50%"} new Obj.css; inner(this.boxid,"<span style='display:block;margin-top:50px;color:#f30'>图片读取可能比较慢，请稍后……</span>") document.onkeydown=function(e){ var e=e?e:window.event; if(e.keyCode=="27"){ iDel(); } } /*移动*/ var obj1=div(this.borderid); var obj2=div(this.boxid); var Site=imgshow.Site; var Move=imgshow.Move; obj1.onmousedown=function(){Site(arguments[0],obj1,obj2);this.style.cursor="move";document.onmousemove=function(){Move(arguments[0],obj1,obj2)};} document.onmouseup=function(){this.onmousemove="";obj1.style.cursor=""} } iShow.prototype.iLoad=function(e,ele){ var image=new Image(); image.src=e.href; if(image.complete){Reset();}else{ image.onload=function(){Reset();} } function Reset(){ var iw0=image.width,ih0=image.height; var W0=iw0+ele.bdSize,H0=ih0+ele.bdSize+ele.tSize; function curSize(){ css={id:borderid,width:W0+"px",height:H0+"px",left:"50%",top:"30px",margin:"0 0 0 "+-W0/2+"px"}; new Obj.css; css={id:boxid,width:iw0+"px",height:ih0+"px",left:"50%",top:"30px",margin:ele.tSize/2+"px 0 0 "+-(W0-ele.bdSize)/2+"px"}; new Obj.css; } var Size=(image.width>document.body.clientWidth*ele.iControlSize || image.height>document.body.clientHeight*ele.iControlSize)?true:false if(ele.iControl=="1" && Size==true){ var iInfo=ele.iCount(image,ele.iControlSize); image.width=iInfo.iW,image.height=iInfo.iH; } var bt1="<a href='#' style='color:#fff;left:20px;text-decoration:none;' onclick='imgshow.iDel()'>关闭</a>"; var bt2="<a href='#' style='color:#fff;margin-left:20px;text-decoration:none;' id='iZoom_cur'>原图大小</a>" var bt="<span style='float:right;width:100px;text-align:left;'>"+bt1+bt2+"</span>"; var text1="<img src='"+image.src+"' style='width:100%' alt='"+e.title+"' />"; var text2="<span id='imgshow_title'>"+bt+e.title+"</span>" var text=text1+text2; var W=image.width+ele.bdSize,H=image.height+ele.bdSize+ele.tSize; css={id:borderid,width:W+"px",height:H+"px",left:"50%",top:"50%",margin:-H/2+"px"+" 0 0 "+-W/2+"px"}; new Obj.css; css={id:boxid,width:image.width+"px",height:image.height+"px",left:"50%",top:"50%",margin:-(image.height+ele.tSize)/2+"px"+" 0 0 "+-image.width/2+"px"}; new Obj.css; inner(ele.box,text); css={id:"imgshow_title",width:"100%",height:"22px",position:"absolute",bottom:"-26px",left:0,lineHeight:"22px",overflow:"hidden",color:"#fff"} new Obj.css; div("iZoom_cur").onclick=curSize; } } iShow.prototype.iCount=function(e,f){ var doc=document.body,W=doc.clientWidth*f,H=doc.clientHeight*f; var obj=e.width/W>e.height/H?{iW:W,iH:e.height*W/e.width,iType:1}:{iW:e.width*H/e.height,iH:H,iTyle:2}; return obj; } iShow.prototype.Site=function(e,obj1,obj2){ this.X=oX(arguments[0]); this.Y=oY(arguments[0]); this.oLeft1=obj1.offsetLeft; this.oTop1=obj1.offsetTop; this.oLeft2=obj2.offsetLeft; this.oTop2=obj2.offsetTop; } iShow.prototype.Move=function(e,obj1,obj2){ var X=oX(arguments[0])-this.X,Y=oY(arguments[0])-this.Y; var Left1=this.oLeft1+X,Top1=this.oTop1+Y,Left2=this.oLeft2+X,Top2=this.oTop2+Y; css={id:obj1.id,left:Left1+"px",top:Top1+"px",margin:0} new Obj.css; css={id:obj2.id,left:Left2+"px",top:Top2+"px",margin:0} new Obj.css; } iShow.prototype.iDel=function(){ del(boxid);del(borderid);del(bgid); document.onkeydown=''; } /*图片滚动*/ function ImgMove(id1,id2){ this.wrap=id1;/*容器ID*/ this.imgs=id2;/*图片容器的id，这里是ul的id*/ this.Tag="li";/*每个图片的独立容器看例子*/ this.WrapWidth="460";/*调整图片显示范围的宽度*/ this.WrapHeight="64";/*调整图片显示范围的高度*/ this.n=4;/*每次滚动图片数*/ this.btl="btl";/*按钮id*/ this.btr="btr";/*按钮id*/ this.speed=40;/*滚动速度*/ } ImgMove.prototype.Start=function(){ var obj=div(this.imgs),container=div(this.wrap);this.newWrap="newImgWrap";; del(this.imgs); var o1=container.innerHTML; container.innerHTML=""; Create(this.wrap,this.newWrap,"div"); css={id:this.newWrap,width:this.WrapWidth+"px",height:this.WrapHeight+"px",overflow:"hidden",margin:"0 0 10px 0"} new Obj.css; var obj2=div(this.newWrap) obj2.appendChild(obj); container.innerHTML+=o1; var obj=div(this.imgs),w1=obj.children[1].offsetLeft-obj.children[0].offsetLeft; var objs=obj.getElementsByTagName(this.Tag); obj.style.width=w1*(objs.length+1)+"px"; this.Move(w1); } ImgMove.prototype.Move=function(w1){ var obj=div(this.newWrap),n=this.n,Pow=this.Pow,v=this.speed; function move(e){ var x=0,l=0,myMove=setInterval(go,1),q=w1*n; function go(){if(l+Pow(x,v)>q){e==2?obj.scrollLeft+=(q-l):obj.scrollLeft-=(q-l);clearInterval(myMove);}else{var ml=parseInt(Pow(x,v));if(e==2){obj.scrollLeft+=ml}else{obj.scrollLeft-=ml};x+=1;l+=ml;}} } div(this.btl).onclick=function(){move(1)} div(this.btr).onclick=function(){move(2)} } ImgMove.prototype.Pow=Pow; function Pow(x,v){ var y=Math.sin(Math.PI*x/180); return y*v; } var ImgMove=new ImgMove("imgshow","images"); ImgMove.Start(); var imgshow=new iShow("imglist"); imgshow.iMouse(); var imgshow=new iShow("imgshow"); imgshow.iMouse(); </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lifeseato 于 2010-6-4 12:08 编辑 ]

作者: lifeseato 发布时间: 2010-06-04

虽然我不会，但作为用户方面我觉得不是太好

作者: hxz55 发布时间: 2010-06-04

体验不是很好。感觉

作者: jgs1982 发布时间: 2010-06-04

看来建议也没有用。。总的来说。图片大了，还要提示用户按ESC键。郁闷

作者: wangsdong 发布时间: 2010-06-05

感触就是女人是老虎

作者: cielkong 发布时间: 2010-06-05

能不能点击空白处点击图片都可以关闭

作者: 1314ing 发布时间: 2010-06-05