放大镜 js版
2020-10-04 本文已影响0人
lucky_yao
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.min_img {
width: 480px;
height: 270px;
background-image: url(img/1.jpg);
background-size: 100%;
}
.fdj {
width: 240px;
height: 130px;
background: #ccc;
opacity: .5;
position: absolute;
display: none;
}
.max_img {
width: 960px;
height: 540px;
overflow: hidden;
position: absolute;
display: none;
}
</style>
</head>
<body style="height: 4000px;">
<div class="min_img">
<div class="fdj">
</div>
</div>
<div class="max_img">
<img src="img/1.jpg">
</div>
</body>
<script type="text/javascript">
var ofdj = document.getElementsByClassName('fdj')[0];
var omin = document.getElementsByClassName('min_img')[0];
var omax = document.getElementsByClassName('max_img')[0];
window.onmousemove = function(e) {
var e = e || window.event;
var l = e.clientX - ofdj.offsetWidth / 2;
var t = e.clientY - ofdj.offsetHeight / 2;
if (l < 0) {
l = 0
}
if (t < 0) {
t = 0
}
if (l > omin.offsetWidth - ofdj.offsetWidth) {
l = omin.offsetWidth - ofdj.offsetWidth
}
if (t > omin.offsetHeight - ofdj.offsetHeight) {
t = omin.offsetHeight - ofdj.offsetHeight
}
ofdj.style.left = l + 'px';
ofdj.style.top = t + 'px';
omax.scrollLeft = l * 4;
omax.scrollTop = t * 4;
}
omin.onmouseover = function() {
ofdj.style.display = 'block';
omax.style.display = 'block';
}
omin.onmouseout = function() {
ofdj.style.display = 'none';
omax.style.display = 'none';
}
</script>
</html>
