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.jiaochengji.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，缩略图宽高
您可能感兴趣的文章：
基于jquery的放大镜效果
Javascript图片放大镜的实例分析
js放大镜效果一例
JS放大镜效果(简洁实用的放大镜效果)
jQuery图片放大镜插件 magnifier
jQuery 图片放大镜效果插件jQZoom的用法举例
什么是canvas离屏技术？canvas放大镜效果如何实现？
关于Jqzoom的使用心得 jquery放大镜效果插件
电商网站上常用的js放大镜效果(京东商城的js放大镜代码)
在canvas上实现元素图片镜像翻转动画效果的方法