不错的图片演示效果.
不错的图片演示效果： 点击预览
来自无忧脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Image</title>
<style type="text/css">
* {margin:0px auto;padding:0px;text-align:center;}
* {font-size:9pt;font-family:Arial;}
body {margin-top:20px;}
body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}
div {position:relative;width:400px;height:400px;}
font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;}
/* Img Show Zone */
#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;}
#imgShow img {border:none;}
/* Control Bar Style */
#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;}
#ctlBar[id] {bottom:-2px;right:-2px;}
.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;}
.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;}
.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;}
.ctlRight {width:15%;height:70%;float:right;overflow:hidden;}
#ctlBar img {border:none;display:block;}
.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;}
* html .ctlBottom a {margin-left:0px;margin-right:0px;}
.ctlBottom a:hover {color:#3cf;}
#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;}
#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;}
#arrLeft {float:left;margin:2px;width:16px;height:16px;}
#arrRight {float:right;margin:2px;width:16px;height:16px;}
.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;}
#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;}
#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;}
* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);}
#pre {position:relative;}
/* top:0px;left:0px; */
/* Hide ctl bar */
#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;}
* html #ctlHide {right:0px;bottom:0px;}
/* Test Other Parts */
#test {margin-top:10px;}
#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;}
</style>
<script type="text/javascript">
var p=1;
var prep;
var imgp;
var px;
var py;
var msx;
var msy;
var tmpx;
var tmpy;
var dx=0;
var dy=0;
var dragfg=false;
function pDrag(e){
if(dragfg){
var pcon=document.getElementById("ctlCenter");
var pdiv=document.getElementById("dragDiv");
var pimg=document.getElementById("pre");
var dltx=e.clientX-tmpx;
var dlty=e.clientY-tmpy;
var marl=(pcon.clientWidth-pimg.width)/2;
var marr=marl+pimg.width-pdiv.clientWidth;
var mart=(pcon.clientHeight-pimg.height)/2;
var marb=mart+pimg.height-pdiv.clientHeight;
var divt=parseInt(pdiv.style.top);
var divl=parseInt(pdiv.style.left);
var demox=divl+dltx;
var demoy=divt+dlty;
if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+"px";
if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+"px";
tmpx=e.clientX;
tmpy=e.clientY;
//return false;
}
}
function sDrag(e)
{
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
dx=0;
dy=0;
if(!dragfg) {
msx=e.clientX;
msy=e.clientY;
}
if(temp.id=="dragDiv"){
dragfg=true;
px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX;
py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY;
tmpx=e.clientX;
tmpy=e.clientY;
}
}
function eDrag(e){
dragfg=false;
var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2;
var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2;
var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth;
o.scrollTop=scrTop*ppp;
o.scrollLeft=scrLeft*ppp;
}
</script>
</head>
<body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');">
<div>
<div id="imgShow">
<img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
</div>
<div id="ctlBar">
<div class="ctlTop"><span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div>
<div class="ctlLeft"><br />T<br/>O<br/>O<br/>L<br/>S</div>
<div class="ctlRight">
<font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font>
<font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font>
</div>
<div id="ctlCenter"><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div>
</div>
<div class="ctlBottom">
<font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font>
<a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a>
<font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font>
</div>
</div>
<span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span>
</div>
<p id="test">
<img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="Oops" onclick="imgChg(this.src)" />
</p>
<p>本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue('viewLocal');" /></p>
<p>URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue('viewOnline');" /></p>
<script type="text/javascript">
function imgChg(s){
if(document.getElementById('ctlBar').style.display=="none"){
document.getElementById('ctlBar').style.display="block";
document.getElementById('ctlHide').style.display="none";
var flag=true;
}
var newImg=document.createElement("img");
newImg.id="pre";
newImg.alt="Oops";
newImg.onmouseout="eDrag(event);"
newImg.src=s;
document.getElementById("pic").src=s;
document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre"));
preImgInit();
if(flag){
document.getElementById('ctlBar').style.display="none";
document.getElementById('ctlHide').style.display="block";
}
o.scrollTop=0;
o.scrollLeft=0;
}
function chkValue(ob)
{
var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase();
if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value);
}
document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg";
</script>
<script type="text/javascript">
var sp=5;
var tc;
function imgScroll(d){
var ptx=o.scrollLeft;
var pty=o.scrollTop;
if(tc) clearInterval(tc);
if(d=="up"){
tc=setInterval("up()",30);
}
else if(d=="down"){
tc=setInterval("down()",30);
}
else if(d=="left"){
tc=setInterval("left()",30);
}
else if(d=="right"){
tc=setInterval("right()",30);
}
else{
return alert("There must be something wrong
");
}
}
function up() {o.scrollTop -= sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function down() {o.scrollTop += sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function left() {o.scrollLeft -= sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function right() {o.scrollLeft += sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function mvStop()
{
if(tc) clearInterval(tc);
}
</script>
<script type="text/javascript">
function preImgInit(){
var imgx=document.getElementById("pre").width;
var imgy=document.getElementById("pre").height;
if(imgx==imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height="100%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top="0px";
}
else if(imgx>imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height=imgy/imgx*100+"%";
prep=document.getElementById("pre").clientWidth/imgx;
imgp=document.getElementById("imgShow").clientWidth/imgx;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
}
else
{
document.getElementById("pre").style.height="100%";
document.getElementById("pre").style.width=imgx/imgy*100+"%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.top="0px";
document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1)+"px";
}
}
document.body.onselectstart=function(){return false};
preImgInit();
var o=document.getElementById("imgShow");
</script>
</body>
</html>
来自无忧脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Map Image</title><style type="text/css">
* {margin:0px auto;padding:0px;text-align:center;}
* * {font-size:9pt;font-family:Arial;}body {margin-top:20px;}body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}div {position:relative;width:400px;height:400px;}font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;}/* Img Show Zone */#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;}#imgShow img {border:none;}/* Control Bar Style */#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;}#ctlBar[id] {bottom:-2px;right:-2px;}.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;}.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;}.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;}.ctlRight {width:15%;height:70%;float:right;overflow:hidden;}#ctlBar img {border:none;display:block;}.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;}* html .ctlBottom a {margin-left:0px;margin-right:0px;}.ctlBottom a:hover {color:#3cf;}#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;}#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;}#arrLeft {float:left;margin:2px;width:16px;height:16px;}#arrRight {float:right;margin:2px;width:16px;height:16px;}.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;}#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;}#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;}* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);}#pre {position:relative;}/* top:0px;left:0px; */ /* Hide ctl bar */#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;}* html #ctlHide {right:0px;bottom:0px;}/* Test Other Parts */#test {margin-top:10px;}#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;}</style><script type="text/javascript">var p=1;var prep;var imgp;var px;var py;var msx;var msy;var tmpx;var tmpy;var dx=0;var dy=0;var dragfg=false;function pDrag(e){if(dragfg){var pcon=document.getElementById("ctlCenter");var pdiv=document.getElementById("dragDiv");var pimg=document.getElementById("pre");var dltx=e.clientX-tmpx;var dlty=e.clientY-tmpy;var marl=(pcon.clientWidth-pimg.width)/2;var marr=marl+pimg.width-pdiv.clientWidth;var mart=(pcon.clientHeight-pimg.height)/2;var marb=mart+pimg.height-pdiv.clientHeight;var divt=parseInt(pdiv.style.top);var divl=parseInt(pdiv.style.left);var demox=divl+dltx;var demoy=divt+dlty;if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+"px";if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+"px";tmpx=e.clientX;tmpy=e.clientY;//return false;}}function sDrag(e){var temp = (typeof e.target != "undefined")?e.target:e.srcElement;dx=0;dy=0;if(!dragfg) {msx=e.clientX;msy=e.clientY;}if(temp.id=="dragDiv"){dragfg=true;px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX;py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY;tmpx=e.clientX;tmpy=e.clientY;}}function eDrag(e){dragfg=false;var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2;var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2;var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth;o.scrollTop=scrTop*ppp;o.scrollLeft=scrLeft*ppp;}</script></head><body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');"><div><div id="imgShow"><img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" /></div><div id="ctlBar"><div class="ctlTop"><span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div><div class="ctlLeft"><br />T<br/>O<br/>O<br/>L<br/>S</div><div class="ctlRight"><font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font><font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font></div><div id="ctlCenter"><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" /><div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div></div><div class="ctlBottom"><font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font><a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a><font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font></div></div><span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span></div><p id="test"><img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" onclick="imgChg(this.src)" /><img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" onclick="imgChg(this.src)" /><img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" onclick="imgChg(this.src)" /><img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="Oops" onclick="imgChg(this.src)" /></p><p>本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue('viewLocal');" /></p><p>URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue('viewOnline');" /></p><script type="text/javascript">function imgChg(s){if(document.getElementById('ctlBar').style.display=="none"){document.getElementById('ctlBar').style.display="block";document.getElementById('ctlHide').style.display="none";var flag=true;}var newImg=document.createElement("img");newImg.id="pre";newImg.alt="Oops";newImg.onmouseout="eDrag(event);"newImg.src=s;document.getElementById("pic").src=s;document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre"));preImgInit();if(flag){document.getElementById('ctlBar').style.display="none";document.getElementById('ctlHide').style.display="block";}o.scrollTop=0;o.scrollLeft=0;}function chkValue(ob){var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase();if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value);}document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg";</script><script type="text/javascript">var sp=5;var tc;function imgScroll(d){var ptx=o.scrollLeft;var pty=o.scrollTop;if(tc) clearInterval(tc);if(d=="up"){tc=setInterval("up()",30);}else if(d=="down"){tc=setInterval("down()",30);}else if(d=="left"){tc=setInterval("left()",30);}else if(d=="right"){tc=setInterval("right()",30);}else{return alert("There must be something wrong");}}function up() {o.scrollTop -= sp;document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}function down() {o.scrollTop += sp;document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}function left() {o.scrollLeft -= sp;document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}function right() {o.scrollLeft += sp;document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}function mvStop(){if(tc) clearInterval(tc);}</script><script type="text/javascript">function preImgInit(){var imgx=document.getElementById("pre").width;var imgy=document.getElementById("pre").height;if(imgx==imgy){document.getElementById("pre").style.width="100%";document.getElementById("pre").style.height="100%";prep=document.getElementById("pre").clientHeight/imgy;imgp=document.getElementById("imgShow").clientHeight/imgy;document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";document.getElementById("dragDiv").style.left="0px";document.getElementById("dragDiv").style.top="0px";}else if(imgx>imgy){document.getElementById("pre").style.width="100%";document.getElementById("pre").style.height=imgy/imgx*100+"%";prep=document.getElementById("pre").clientWidth/imgx;imgp=document.getElementById("imgShow").clientWidth/imgx;document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px";document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth+"px";document.getElementById("dragDiv").style.left="0px";document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";}else{document.getElementById("pre").style.height="100%";document.getElementById("pre").style.width=imgx/imgy*100+"%";prep=document.getElementById("pre").clientHeight/imgy;imgp=document.getElementById("imgShow").clientHeight/imgy;document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";document.getElementById("dragDiv").style.top="0px";document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1)+"px";}}document.body.onselectstart=function(){return false};preImgInit();var o=document.getElementById("imgShow");</script></body></html>