<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.small_box{
width: 350px;
height: 350px;
border: 1px solid #ccc;
margin: 100px 0 0 50px;
position: relative;
}
.small_box .yellow{
width: 175px;
height: 175px;
background-color: rgba(255 , 255 , 0 , 0.3);
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
}
.big_box{
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: absolute;
top: 100px;
left: 410px;
overflow: hidden;
display: none;
}
.big_img{
position: absolute;
}
</style>
</head>
<body>
<div class="small_box">
<img src="001.jpg" alt="" class="small_img">
<div class="yellow"></div>
</div>
<div class="big_box">
<img src="0001.jpg" alt="" class="big_img">
</div>
<script src="28.html"></script>
<script>
window.onload = function(){
var small_box = document.getElementsByClassName("small_box")[0];
var yellow = document.getElementsByClassName("yellow")[0];
var big_img = document.getElementsByClassName("big_img")[0];
var big_box = document.getElementsByClassName("big_box")[0];
small_box.onmouseover = function(){
yellow.style.display = "block"
big_box.style.display = "block"
}
small_box.onmouseout = function(){
yellow.style.display = "none"
big_box.style.display = "none"
}
small_box.onmousemove = function(e){
e = event || window.event;
var pageX = e.pageX || e.clientX + getScroll().left;
var pageY = e.pageY || e.clientY + getScroll().top;
var x = pageX - small_box.offsetLeft - yellow.offsetWidth / 2;
var y = pageY - small_box.offsetTop - yellow.offsetHeight / 2;
if(x < 0){
x = 0;
}else if (x > small_box.offsetWidth - yellow.offsetWidth){
x = small_box.offsetWidth - yellow.offsetWidth
}
if(y < 0){
y = 0;
}else if (y > small_box.offsetWidth - yellow.offsetHeight){
y = small_box.offsetWidth - yellow.offsetHeight
}
yellow.style.left = x + "px";
yellow.style.top = y + "px";
var bl = (big_img.offsetWidth - big_box.offsetWidth)/(small_box.offsetWidth - yellow.offsetWidth);
big_img.style.left = -x*bl + "px"
big_img.style.top = -y * bl + "px"
}
}
</script>
</body>
</html>
【放大镜】想知道网上的物体放大是怎么做的吗
最新推荐文章于 2024-08-24 13:47:49 发布