今天在玩 google earth 4.0b，发现 Print Screen 下来的图片很大，如果直接放在网页上，因为尺寸太大又不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。这段代码还兼容 firefox。限定滚动的范围，不会出现背景。用到onmousemove事件，图片实时随鼠标移动而移动。
运行代码框
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #pic { width:420px; height:300px; border: 3px solid #ccc; background-image: url(http://www.blueidea.com/articleimg/2006/06/3687/01.jpg); background-repeat: no-repeat; background-position: 0px 0px; cursor: move; } --> </style> <script type="text/javascript"> <!-- var p = new Array(); var speed = 0.05; //速度 var picWidth = 1280; // 大图的宽高 var picHeight = 971; var x,y // 鼠标点下去时背景的坐标 var x_new,y_new //位移 var haveclick = false; function getmouseposition(event) { if(document.all) { x = document.body.scrollLeft+event.clientX; y = document.body.scrollTop+event.clientY; }else { x = event.layerX; y = event.layerY; } haveclick = true; } function movestop() { haveclick = false; } function movestart(event) { if(haveclick) { if(document.getElementById('pic').style.backgroundPosition.length==0) {document.getElementById('pic').style.backgroundPosition="0px 0px";} p = document.getElementById('pic').style.backgroundPosition.split(" ") if(document.all) { x_new = document.body.scrollLeft+event.clientX; y_new = document.body.scrollTop+event.clientY; }else { x_new = event.layerX; y_new = event.layerY; } x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量 y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10); if (x2<-picWidth+420) x2=-picWidth+420; if (y2>0) y2=0; if (x2>0) x2=0; if (y2<-picHeight+300) y2=-picHeight+300; document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px"; } } --> </script> </head> <body> <div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div> </body> </html>
