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>放大镜</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.缩略图宽高