您的位置：首页 > Web前端 > JavaScript

js之放大镜

2016-01-15 16:27 501 查看
还记得淘宝选购一件商品时，想看看某一部分的细节时的放大镜么？今天我完成了这样一个小功能，分享一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var img1,img2,dd;
window.onload = function(){
img1 = document.getElementById("img1");
img2 = document.getElementById("img2");
dd = document.getElementById("dd");
img1.addEventListener("mouseover",function(){
dd.style.display="";
var mouseX = event.clientX;
var mouseY = event.clientY;
dd.style.left = mouseX-50+"px";
dd.style.top = mouseY-30+"px";
var rtop = mouseY-10-30;
var rleft = mouseX-10-50;
var rwidth = rleft+100;
var rheight = rtop+60;
img2.style.clip = "rect("+rtop+"px "+rwidth+"px "+rheight+"px "+rleft+"px)";
img2.style.zoom = 4;//放大4倍
img2.style.left = (510-4*mouseX)/4+60+"px";
img2.style.top = 10-mouseY+40+"px";
},true);
img1.addEventListener("mouseout",function(){
dd.style.display="none";
},true);
}
</script>
</head>
<body>
<img id="img1" src="img/3.png" style="position: absolute;left:10px;top: 10px;width: 480px;height: 320px;"/>
<img id="img2" src="img/3.png" style="position: absolute;left:510px;top: 10px;width: 480px;height: 320px;"/>
<div id="dd" style="position: absolute;left:20px;top: 20px;width: 100px;height: 60px;border: 1px solid red;display: none;">
</body>
</html>


实现效果：



总结：加油！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航