web 显示大图片带滚动条的,如何实现鼠标拖动浏览,就和地图哪个爬行一样

web 显示大图片带滚动条的,如何实现鼠标拖动浏览,就和地图哪个爬行一样请知道的详细介绍下,谢谢了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

下载地址http://download.csdn.net/download/kingerq/1192740
用JS实现和google地图类似的图片查看器
<!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>用JS实现和google地图一样的图片查看器-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF</title>
<style type="text/css">
.boldhead{ font-weight:bold; font-size: 24px; text-align:center; padding:20px}
.pichead{overflow:auto; height:100px; width:96%; font-size:14px; font-weight:bold; margin:auto auto auto auto; border:2px solid #0066CC; background:#FFFFFF; padding-top:10px; padding-bottom:10px;}
.pichead li{float:left;margin:5px;width:400px;}
.picview { width:96%; margin:auto auto auto auto; text-align:center; border-bottom: solid 2px #0066CC; border-left:solid 2px #0066CC; border-right:solid 2px #0066CC; background:#FFFFFF; height:500px; overflow:hidden; }
.picview img{width:700px; cursor: move; margin:15px; z-index:1; border:8px solid #D8D8D8;}
#contral{ position: absolute;z-index:10; left:15px; top:240px;}
#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 class="boldhead">用JS实现和google地图一样的图片查看器<br />-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF</div><div class="pichead">
  <ul>
    <li><a href="#" onClick="changeImage('Sunset.jpg');return false;">Sunset.jpg</a></li>
    <li><a href="#" onClick="changeImage('Water lilies.jpg');return false;">Water lilies.jpg</a></li>
    <li><a href="#" onClick="changeImage('Blue hills.jpg');return false;">Blue hills.jpg</a></li>
    <li><a href="#" onClick="changeImage('Winter.jpg');return false;">Winter.jpg</a></li>
  </ul>
</div><div id="picview" class="picview">
  <div id="contral">
    <ul>
      <li></li>
      <li><img src="up.gif" onClick="clickMove('up')" title="UP"></li>
      <li></li>
      <li><img src="left.gif" onClick="clickMove('left')" title="LEFT"></li>
      <li><img src="zoom.gif" onClick="realsize();" title="FULL SIZE"></li>
      <li><img src="right.gif" onClick="clickMove('right')" title="RIGHT"></li>      <li></li>
      <li><img src="down.gif" onClick="clickMove('down')" title="DOWN"></li>
      <li></li>
      <li></li>
      <li><img src="zoom_in.gif" onClick="bigit();" title="ZOOM IN"></li>
      <li></li>
      <li></li>
      <li><img src="zoom_out.gif" onClick="smallit();" title="ZOOM OUT"></li>
      <li></li>    </ul>
  </div>
  <img src="Sunset.jpg" alt="Moving" name="viewArea" id="viewArea" />
  </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 = "600px";
  vv.scrollTop = 0;
  vv.scrollLeft = 0;
}</script>

web 显示大图片 带滚动条的,如何实现鼠标拖动浏览,就和地图哪个爬行一样

解决方案 »

web 显示大图片带滚动条的,如何实现鼠标拖动浏览,就和地图哪个爬行一样