Javascript实现小方框中浏览大图特效
[ 来路：21kn.com 时间：2007-7-7 20:12:30 点击： ]
今天在玩 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>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
：：：：站长友情提示：多花一分钟学点什么都好：：：：
上一篇：一个不错的日期输入控件 下一篇：JS捕捉网页浏览器窗口的关闭与刷新
= = 免责声明 = =
① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。 ② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。 ※联系方式：Airtofly@163.com
：：推荐文章：：
：：图像设计：：
Copyright © 2007 21kn.com Inc. All rights reserved.e天下网络工作室
网站白天客服QQ：26875416 (非24小时) 合作QQ：597004688 粤ICP备06026423号
