一个模仿MAP image效果的图片浏览效果

受那位WPSXXX的 IMG大于DIV 的启发写的
文件打包放在: http://bbs.51js.com/thread-69139-1-1.html
有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢
sjx.saxon@gmail.com

<!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>

提示：您可以先修改部分代码再运行

posted @ 2007-06-10 13:34 海浪~~ 阅读(257) 评论(0) 收藏举报

刷新页面返回顶部

海浪

一个模仿MAP image效果的图片浏览效果

公告