图片查看的放大镜效果（js）

最新推荐文章于 2019-10-23 20:18:57 发布

李_不理解

最新推荐文章于 2019-10-23 20:18:57 发布

阅读量278

点赞数

文章标签： web前端前端 javascript

本文链接：https://blog.csdn.net/sunflower_li/article/details/62423131

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
.smallBox,.bigBox{
position: absolute;
left: 100px;
top: 50px;
width: 300px;
height: 300px;
}
.smallBox img{
width: 300px;
height: 300px;
}
.bigBox{
left: 420px;
overflow: hidden;
}
.bigBox img{
position: absolute;
left: 0;
top: 0;
display: none;
}
.contorl{
position: absolute;
left: 0;
top: 0;
background: #000;
opacity: 0.3;
filter: alpha(opacity=30);
display: none;
}
</style>
<script>
window.onload = function() {
var smallBox = document.getElementById("smallBox");
var bigImg = document.getElementById("bigImg");
var contorl = document.getElementById("contorl");
var scale = 3;
//当鼠标进入小图时
smallBox.onmouseenter = function(){
contorl.style.display = "block";
bigImg.style.display = "block";
contorl.style.width = smallBox.offsetWidth / scale + "px";
contorl.style.height = smallBox.offsetHeight / scale + "px";
bigImg.style.width = smallBox.offsetWidth * scale + "px";
bigImg.style.height = smallBox.offsetHeight * scale + "px";
};
//鼠标移动
smallBox.onmousemove = function(ev){
ev = ev || event;

var left = ev.clientX - smallBox.offsetLeft - contorl.offsetWidth / 2;
var top = ev.clientY - smallBox.offsetTop - contorl.offsetHeight / 2;
if(left < 0){
left=0;
}
if(left >= smallBox.offsetWidth - contorl.offsetWidth){
left = smallBox.offsetWidth - contorl.offsetWidth;
}
if(top < 0){
top=0;
}
if(top >= smallBox.offsetHeight - contorl.offsetHeight){
top = smallBox.offsetHeight - contorl.offsetHeight;
}
contorl.style.left = left + "px";
contorl.style.top = top + "px";
bigImg.style.left = -scale * left + "px";
bigImg.style.top = -scale * top + "px";
};
//鼠标离开
smallBox.onmouseleave = function(){
contorl.style.display = "none";
bigImg.style.display = "none";
};
}
</script>
</head>
<body>
<div id="smallBox" class="smallBox">
<img src="images/5.jpg" />
<div id="contorl" class="contorl"></div>
</div>
<div class="bigBox" >
<img id="bigImg" src="images/5.jpg" />
</div>
</body>
</html>