<!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" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<title>3D</title>
<style type="text/css">
.picview { width:100%; margin:auto auto auto auto; text-align:center; background:#FFFFFF; height:700px; overflow:hidden; }
.picview img{width:800px; cursor: move; margin:15px; z-index:1; border:8px }
#contral{ position: absolute;z-index:10; left:15px; top:80px;}
#contral img{ width:auto; margin:auto; cursor:auto; width:20px; border:0px;}
#contral ul{width: 88px;}
#contral li{width:26px; height:26px; float:left; list-style:none;}
</style>
</head>
<body>
<div id="picview" class="picview">
<div id="contral">
<ul>
<li></li>
<li><img src="http://wecanqiang.h206.000pc.net/up.gif" onClick="clickMove('up')" title="UP"></li>
<li></li>
<li><img src="http://wecanqiang.h206.000pc.net/left.gif" onClick="clickMove('left')" title="LEFT"></li>
<li><img src="http://wecanqiang.h206.000pc.net/zoom.gif" onClick="realsize();" title="FULL SIZE"></li>
<li><img src="http://wecanqiang.h206.000pc.net/right.gif" onClick="clickMove('right')" title="RIGHT"></li>
<li></li>
<li><img src="http://wecanqiang.h206.000pc.net/down.gif" onClick="clickMove('down')" title="DOWN"></li>
<li></li>
<li></li>
<li><img src="http://wecanqiang.h206.000pc.net/zoom_in.gif" onClick="bigit();" title="ZOOM IN"></li>
<li></li>
<li></li>
<li><img src="http://wecanqiang.h206.000pc.net/zoom_out.gif" onClick="smallit();" title="ZOOM OUT"></li>
<li></li>
</ul>
</div>
<img src="http://wecanqiang.h206.000pc.net/Sunset.jpg" name="viewArea" id="viewArea" />
<map name="map" id="map">
<area shape="poly" coords="100,100,100,100" href="http://www.baidu.com" />
</div>
<!--div id="mouseData"></div-->
</body>
</html><script language="javascript">
var rate = 0.2;
var pp = document.getElementById("viewArea");
var vv = document.getElementById("picview");
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var st,sl;
function moveMouse(e) {
if (isdrag) {
var mouseX = nn6 ? e.clientX : event.clientX;
var mouseY = nn6 ? e.clientY : event.clientY;
vv.scrollTop = st+(y-mouseY);
vv.scrollLeft = sl+(x-mouseX);
//document.getElementById('mouseData').innerHTML = "x="+x+" y="+y+" x-mouseX="+(x-mouseX)+" y-mouseY="+(y-mouseY);
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
isdrag = true;
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
st = vv.scrollTop;
sl = vv.scrollLeft;
document.onmousemove = moveMouse;
return false;
}
pp.onmousedown=initDrag;
pp.onmouseup=new Function("isdrag=false");
function bigit(){
pp.style.height = pp.height*(1+rate)+"px";
pp.style.width = pp.width*(1+rate)+"px";
}
function smallit(){
pp.style.height = pp.height*(1-rate)+"px";
pp.style.width = pp.width*(1-rate)+"px";
}
function realsize(){
var newImg = new Image();
newImg.src = pp.src;
pp.style.height = newImg.height+"px";
pp.style.width = newImg.width+"px";
}
function clickMove(s){
if(s=="up"){
vv.scrollTop = vv.scrollTop-100;
}else if(s=="down"){
vv.scrollTop = vv.scrollTop+100;
}else if(s=="left"){
vv.scrollLeft = vv.scrollLeft-100;
}else if(s=="right"){
vv.scrollLeft = vv.scrollLeft+100;
}
}
function changeImage(path){
pp.src = path;
pp.style.width = "1000px";
vv.scrollTop = 0;
vv.scrollLeft = 0;
}
</script>
2 个解决方案
#1
也可以点这个链接看直接的效果http://wecanqiang.h206.000pc.net/show.html
#2
代码太多了，跟踪一下，看哪儿代码出错了。
#1
也可以点这个链接看直接的效果http://wecanqiang.h206.000pc.net/show.html
#2
代码太多了，跟踪一下，看哪儿代码出错了。