js放大镜效果一例

发布时间:2020-04-09编辑:脚本学堂
本文介绍下,用js代码实现的一个放大镜效果的例子,有需要的朋友,参考下吧。

js放大镜实例。
 

复制代码 代码示例:

<!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=utf-8" />
<title>js放大镜_www.jb200.com</title>
<style type="text/css">
#box{
    top:100px;
    left:50px;
    position:absolute;
}

#zoom{   
    position:absolute;
    overflow:hidden;
    width:0px;
    height:0px;
    top:0px;
    left:0px;
    border-style:solid;
}
</style>
</head>
<body>
<h1 align="center">建议使用火狐或者谷歌浏览器查看本页,放大镜特效将获得完美体现</h1>
<div id="box" onMouseMove="move(event)">
<div>
<img id="simg" width="900" height="1200" />
</div>

<div id="zoom">
<img id="dimg" width="400" height="400" style="position:relative;" />
</div>
</div>

<script language="javascript">
var url = '1.jpg';//图片地址

var fw = 400;//放大镜宽度
var fh = 400;//放大镜高度

var sw = 900;//缩略图宽度
var sh = 1200;//缩略图高度

var dw = 1800;//原图宽度,必须设置
var dh = 2400;//原图高度,必须设置

var did='box';//div的ID
var zid='zoom';//放大镜的ID
var simg='simg';//小图的ID
var dimg='dimg';//大图的ID

//初始数据
window.onload=function(){   
    document.getElementById(zid).style.width=fw+'px';
    document.getElementById(zid).style.height=fh+'px';
   
    document.getElementById(simg).style.width=sw+'px';
    document.getElementById(simg).style.height=sh+'px';
    document.getElementById(simg).src=url;
   
    document.getElementById(dimg).style.width=dw+'px';
    document.getElementById(dimg).style.height=dh+'px';
    document.getElementById(dimg).src=url;
}

//鼠标移动事件
function move(event){
    var obj = document.getElementById(did);
    var oleft=obj.offsetLeft;
    while(obj=obj.offsetParent){   
        oleft+=obj.offsetLeft;   
    }

    var obj = document.getElementById(did);
    var otop=obj.offsetTop;
    while(obj=obj.offsetParent){   
        otop+=obj.offsetTop;   
    }
   
    //鼠标相对坐标
    var mleft = (event.clientX-oleft+document.body.scrollLeft+document.documentElement.scrollLeft)-2;   
    var mtop = (event.clientY-otop+document.body.scrollTop+document.documentElement.scrollTop)-2;
   
    if(mleft>=0 && mleft<=sw && mtop>=0 && mtop<=sh){
        //移动放大镜
        document.getElementById(zid).style.left=mleft-fw/2+'px';
        document.getElementById(zid).style.top=mtop-fh/2+'px';
        //改变放大镜显示
        document.getElementById(dimg).style.left=-mleft/sw*dw+fw/2+'px';
        document.getElementById(dimg).style.top=-(mtop/sh)*dh+fh/2+'px';
    }
}
</script>
</body>
</html>

注意事项,使用前要设置好如下的信息:
1,图片地址
2,原图宽高
3,缩略图宽高