Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.111cn.net/1999/xhtml"><head><title></title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">* {Margin: 0; padding: 0; list-style: inside 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><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.css info (); var obj1_div(this.css. id); with (obj. style) {ie? (This.css. float! = Undefined? StyleFloat=this.css. float: "") :( this.css. float! = Undefined? CssFloat=this.css. float: "" too many this.css. background! = Undefined? Background?this.css. background: "" define this.css. width! = Undefined? Widthdomainthis.css. width: "" incluthis.css. height! = Undefined? Height1_this.css. height: "" ;this.css. position! = Undefined? Positionincluthis.css. position: "" incluthis.css. left! = Undefined? Left+this.css. left: "" incluthis.css. top! = Undefined? Top=this.css. top: ";this.css. bottom! = Undefined? Bottom=this.css. bottom: "" incluthis.css. padding! = Undefined? Paddingdomainthis.css. padding: "" incluthis.css. margin! = Undefined? Margin#this.css. margin: "" incluthis.css. filter! = Undefined? Filtereffecthis.css. filter: "" effecthis.css. opacity! = Undefined? Opacityeffecthis.css. opacity: "" effecthis.css. zIndex! = Undefined? Zindexjavasthis.css. zIndex: "" javasthis.css. border! = Undefined? Borderincluthis.css. border: "" incluthis.css. overflow! = Undefined? Overfloweffecthis.css. overflow: "" effecthis.css. display! = Undefined? Displayincluthis.css. display: "" incluthis.css. textAlign! = Undefined? Textalign?this.css. textAlign: "" {this.css. fontSize! = Undefined? Fontsizeeffecthis.css. fontSize: "" effecthis.css. color! = Undefined? Color=this.css. color: "" effecthis.css. verticalAlign! = Undefined? Verticalign?this.css. verticalAlign: "" define this.css. cursor! = Undefined? Cursorrentthis.css. cursor: "" incluthis.css. lineHeight! = Undefined? Lineheight1_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 response = css; return this ;}</script></head><body><!--把下面代码加到<body>与</body>之间--><div id="ibody"><div class="imglist" id="imglist"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="imglist imglist2" id="imglist2"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><script type="text/javascript">Function iShow (objid) {this. iControl = "1"/* 1 is the image size adaptive */this. iControlSize = 0.8/* the maximum image size proportion to the visible area (this is required. iControl = 1) */this. ibody = "ibody";/* bodyid */this. bgid = "container"/* background id */this. borderid = "wrap";/* border id */this. boxid = "imgwrap";/* image container id */this. listid = objid;/* Image List id */this. borderSize = 10;/* border size */this. titleSize = 22;/* Title area size */this. alpha = 3;/* transparency --- 1 ~ 10 */this. bgc = "000"/* background color * // * default pop-up box style */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 () {/* mouse event */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,"图片读取可能比较慢，请稍后……")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: falseif (ele. iControl = "1" & Size = true) {var iInfo = ele. iCount (image, ele. iControlSize); image. width = iInfo. iW, image. height = iInfo. iH;} var bt1 = "disabled"; var bt2 = "source image size" var bt = "" + bt1 + bt2 + ""; var text1 = ""; var text2 = "" + bt + e. title + "" 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. p Rototype. 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>
Tip: you can modify some code before running
