这两天我在睡觉前想了一下网页中的放大镜原理，并试着去写出来，没想到真的想出来了。其实思路是特别简单的，我是用了背景图片的概念来做的。在一张图片上绑定一个onmousemove事件，然后根据鼠标在图片的位置然后在另一个用于显示放大的div中显示背景图的相应位置。以下是代码展示：
<!doctype html>
<html>
<head>
<title>放大镜效果原理</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
</style>
<script type="text/javascript">
window.onload = function(){
/*目前浏览器兼容性还存在问题*/
var img = document.getElementsByTagName('img')[0];
var zoom = document.getElementById('zoom');
zoom.style.display = 'none';
zoom.style.float = 'left';
zoom.style.border = '1px solid #eee';
zoom.style.marginLeft = '10px';
img.onmousemove = function(evt){
zoom.style.display = 'block';//显示放大镜
zoom.style.backgroundImage = 'url('+this.src+')';
var xTimes = '400%';
var yTimes = '400%';
zoom.style.backgroundSize = xTimes+' '+yTimes;//设置放大镜放大倍数
event = evt || window.event;
//获取图片在浏览器上的x轴坐标
var imgLeft = event.target.x;
//获取图片在浏览器上的y轴坐标
var imgTop = event.target.y;
zoom.style.marginTop = imgTop+'px';
//获取鼠标在图片上移动的x轴坐标
var offsetX = event.clientX-imgLeft;
//获取鼠标在图片上移动的y轴坐标
var offsetY = event.clientY-imgTop;
var width = event.target.clientWidth;//原图的宽度
var height = event.target.clientHeight;//原图的高度
zoom.style.width = width+'px';//根据原图的宽度设置放大镜的宽度
zoom.style.height = height+'px';//根据原图的高度设置放大镜的高度
var glassWidth = 100;//设置放大镜的区域宽度
var glassHeight = 100;//设置放大镜的区域高度
//设置放大镜超出图片边界时放大镜的位置
if(offsetX-glassWidth/2<0){
offsetX = 0;
}
if(offsetY-glassHeight/2<0){
offsetY = 0;
}
if(offsetX-glassWidth/2>width-glassWidth){
offsetX = width;
}
if(offsetY-glassHeight/2>height-glassHeight){
offsetY = height;
}
var x = (offsetX/width)*100;//放大镜最左位置在图片的位置
var y = (offsetY/height)*100;//放大镜最上位置在图片的位置
zoom.style.backgroundPosition = x+'% '+y+'%';
}
//鼠标移除图片时隐藏放大镜
img.onmouseout = function(){
zoom.style.display = 'none';
}
}
</script>
</head>
<body>
<img src="__PUBLIC__/images/nv.jpg" style="border:1px solid red;float:left;height:400px;margin-left:100px;margin-top:100px;"/>
<div id="zoom"></div>
</body>
</html>
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
