JS放大镜效果

最新推荐文章于 2023-08-23 15:31:17 发布

加油馒头

最新推荐文章于 2023-08-23 15:31:17 发布

阅读量2.5k

点赞数

分类专栏： js 文章标签： html javascript function url

本文链接：https://blog.csdn.net/jaylongli/article/details/6051400

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>放大镜</title>
</head>
<body bgcolor="#FFFFFF">
<center>
--JS放大镜显示--

单击"放大镜"开始浏览，再次单击停止。</center>

<img src="http://www.softpure.com/soft/work/jsviewer/small_hill.gif" id="bgLayer" style="position:absolute; left:160px; top:50px;">
<img src="http://www.softpure.com/soft/work/jsviewer/viewer.gif" id="myviewer" οnclick="moveme=!moveme" οnmοusemοve="viewit(this)" style="background-repeat:no-repeat;background-position:2000px 2000px;position:absolute;">

document.all.myviewer.style.backgroundImage='url('+bigmap+')';
document.all.myviewer.style.backgroundColor=viewer_bgcolor;
document.write('<img id="getsize" style="position:absolute; left:-2000px; top:-2000px;" src="'+bigmap+'">');

var moveme=false;
function viewit(obj){
if (moveme){
obj.style.left=event.x+parseInt(document.body.scrollLeft)-parseInt(obj.width)/2;
obj.style.top=event.y+parseInt(document.body.scrollTop)-parseInt(obj.height)/2;

Nx=parseInt(document.all.getsize.width)/parseInt(document.all.bgLayer.width);
bgx=(-1)*(Nx-1)*(event.x-parseInt(document.all.bgLayer.style.left)+parseInt(document.body.scrollLeft))-parseInt(obj.style.left)+parseInt(document.all.bgLayer.style.left);

Ny=parseInt(document.all.getsize.height)/parseInt(document.all.bgLayer.height);
bgy=(-1)*(Ny-1)*(event.y-parseInt(document.all.bgLayer.style.top)+parseInt(document.body.scrollTop))-parseInt(obj.style.top)+parseInt(document.all.bgLayer.style.top);

obj.style.backgroundPosition=bgx+" "+bgy;
}}

</script>

</body>
</html>

from:

http://www.jb51.net/article/395.htm

另：http://blog.csdn.net/sunxing007/archive/2009/05/11/4168547.aspx