用javascript实现在小方框中浏览大图的代码_javascript技巧

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script> <BR><!-- <BR>var p = new Array(); <BR>var speed = 1.0; // 1 表示1倍速度，即原速 <BR>var x,y // 鼠标点下去时背景的坐标 <BR>var x_new,y_new //位移 <BR>function getmouseposition(event) <BR>{ <BR> if(document.all) <BR> { <BR> x = document.body.scrollLeft+event.clientX; <BR> y = document.body.scrollTop+event.clientY; <BR> }else <BR> { <BR> x = event.layerX; <BR> y = event.layerY; <BR> } <BR>} <BR>function setmouseposition(event) <BR>{ <BR> if(document.getElementById('pic').style.backgroundPosition.length==0) <BR> {document.getElementById('pic').style.backgroundPosition="0px 0px";} <BR> p = document.getElementById('pic').style.backgroundPosition.split(" ") <BR> if(document.all) <BR> { <BR> x_new = document.body.scrollLeft+event.clientX; <BR> y_new = document.body.scrollTop+event.clientY; <BR> }else <BR> { <BR> x_new = event.layerX; <BR> y_new = event.layerY; <BR> } <br><br> x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量 <BR> y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10); <BR> document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px"; <BR>} <BR>--> <BR></script>



今天在玩 google earth 4.0b，发现 Print Screen 下来的图片很大，如果直接放在网页上，因为尺寸太大又不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。呵呵，该死的是，这段代码还兼容 firefox。


今天在玩 google earth 4.0b，发现 Print Screen 下来的图片很大，如果放在网页不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。呵呵，该死的是，这段代码还兼容 firefox。

--------------------------------------------------------------------------------------
2006.6.20 修改：

·添加了滚动的范围，不会出现背景
·用到onmousemove事件，图片实时随鼠标移动而移动

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





<script> <BR><!-- <BR>var p = new Array(); <BR>var speed = 0.05; //速度 <BR>var picWidth = 1280; // 大图的宽高 <BR>var picHeight = 971; <BR>var x,y // 鼠标点下去时背景的坐标 <BR>var x_new,y_new //位移 <BR>var haveclick = false; <BR>function getmouseposition(event) <BR>{ <BR> if(document.all) <BR> { <BR> x = document.body.scrollLeft+event.clientX; <BR> y = document.body.scrollTop+event.clientY; <BR> }else <BR> { <BR> x = event.layerX; <BR> y = event.layerY; <BR> } <BR> haveclick = true; <BR>} <BR>function movestop() <BR>{ <BR> haveclick = false; <BR>} <BR>function movestart(event) <BR>{ <BR>if(haveclick) <BR>{ <BR> if(document.getElementById('pic').style.backgroundPosition.length==0) <BR> {document.getElementById('pic').style.backgroundPosition="0px 0px";} <BR> p = document.getElementById('pic').style.backgroundPosition.split(" ") <BR> if(document.all) <BR> { <BR> x_new = document.body.scrollLeft+event.clientX; <BR> y_new = document.body.scrollTop+event.clientY; <BR> }else <BR> { <BR> x_new = event.layerX; <BR> y_new = event.layerY; <BR> } <br><br> x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量 <BR> y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10); <br><br> if (x2<-picWidth+420) x2=-picWidth+420; <BR> if (y2>0) y2=0; <BR> if (x2>0) x2=0; <BR> if (y2<-picHeight+300) y2=-picHeight+300; <BR> document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px"; <BR>} <BR>} <BR>--> <BR></script>