javascript|特效
今天在玩 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(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" onmousemove="movestart(event)" > </div></body></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]