对象方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.s_box,
.b_box {
width: 400px;
height: 300px;
position: absolute;
top: 100px;
}
.s_box {
left: 50px;
}
.s_box img {
width: 400px;
height: 300px;
}
.s_box span {
position: absolute;
left: 0;
top: 0;
background: rgba(200, 200, 200, 0.5);
display: none
}
.b_box {
left: 500px;
display: none;
overflow: hidden
}
.b_box img {
width: 1200px;
height: 900px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
//创建对象
function Magnifier() {
//获取元素
this.sBox = document.querySelector('.s_box');
this.span = document.querySelector('.s_box span');
this.bBox = document.querySelector('.b_box');
this.bImg = document.querySelector('.b_box img');
//绑定事件
this.init();
}
Magnifier.prototype.init = function() {
//保存调用对象
var that = this;
//进入
this.sBox.onmouseover = function() {
that.show();
}
//离开
this.sBox.onmouseout = function() {
that.hide();
}
//移动
this.sBox.onmousemove = function(e) {
var ev = window.event || e;
that.move(ev);
}
}
//进入
Magnifier.prototype.show = function() {
//显示
this.span.style.display = 'block';
this.bBox.style.display = 'block';
//计算宽高
this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + 'px';
this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + 'px';
}
//隐藏
Magnifier.prototype.hide = function() {
this.span.style.display = 'none';
this.bBox.style.display = 'none';
}
//移动
Magnifier.prototype.move = function(ev) {
//计算移动距离
var l = ev.clientX - this.sBox.offsetLeft - this.span.offsetWidth / 2;
var t = ev.clientY - this.sBox.offsetTop - this.span.offsetHeight / 2;
//限定边界
if (l <= 0) {
l = 0;
}
if (t <= 0) {
t = 0;
}
if (l >= this.sBox.offsetWidth - this.span.offsetWidth) {
l = this.sBox.offsetWidth - this.span.offsetWidth;
}
if (t >= this.sBox.offsetHeight - this.span.offsetHeight) {
t = this.sBox.offsetHeight - this.span.offsetHeight;
}
//移动
this.span.style.left = l + 'px';
this.span.style.top = t + 'px';
//计算比例 当前值 / 总值，得到的就是比例
var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);
// 根据比例计算右边大图应该移动的距离
// 比例 * 总值，得到的就是当前应该移动的距离
this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
//方法二 计算比值
// var a = this.sBox.offsetWidth - this.span.offsetWidth;
// var b = this.bBox.offsetWidth - this.bImg.offsetWidth;
// var en = b/a;
// this.bImg.style.left = l * en+'px';
// this.bImg.style.top = t * en+'px';
}
new Magnifier();
}
</script>
</head>
<body>
<div class="s_box">
<img src="images/dog.jpg" alt="">
<span></span>
</div>
<div class="b_box">
<img src="images/dog.jpg" alt="">
</div>
</body>
</html>
普通方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#small {
width: 130px;
height: 130px;
float: left;
margin: 100px;
position: relative;
}
#small>img{
width: 130px;
height: 130px;
}
#moveBox {
width: 60px;
height: 40px;
background: rgba(255, 0, 0, 0.2);
position: absolute;
top: 0;
cursor: all-scroll;
display: none;
}
/*130/60 == 800/?*/
#big {
width: 369px;
height: 246px;
border: 1px solid blue;
overflow: hidden;
position: relative;
top: 100px;
left: 500px;
display: none;
}
#big img {
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var small = document.getElementById('small');
var box = document.getElementById('moveBox');
var big = document.getElementById('big');
var bImg = document.getElementById('img');
// console.log(small,box,big,bImg)
//1 鼠标进入small 时显示box 并且显示 big
small.onmouseover = function() {
//显示
box.style.display = 'block';
big.style.display = 'block';
}
//2 移出隐藏
small.onmouseout = function() {
box.style.display = 'none';
big.style.display = 'none';
}
//3跟随鼠标移动
small.onmousemove = function(e) {
var ev = window.event || e;
//计算距离
var l = ev.clientX - small.offsetLeft - box.offsetWidth / 2;
var t = ev.clientY - small.offsetTop - box.offsetHeight / 2;
console.log(ev.clientX - small.offsetLeft + 'dd')
console.log(box.offsetLeft)
//限制移动位置
if (l <= 0) {
l = 0;
}
if (t <= 0) {
t = 0;
}
if (l >= small.offsetWidth - box.offsetWidth) {
l = small.offsetWidth - box.offsetWidth;
}
if (t >= small.offsetHeight - box.offsetHeight) {
t = small.offsetHeight - box.offsetHeight;
}
//鼠标跟随定位
box.style.left = l + 'px';
box.style.top = t + 'px';
//设置显示图片的位置 比例计算
var x = l / (small.offsetWidth - box.offsetWidth);
var y = t / (small.offsetHeight - box.offsetHeight);
//计算右侧图片移动距离
var gx = x * (big.offsetWidth - bImg.offsetWidth);
var gy = y * (big.offsetHeight - bImg.offsetHeight);
//第二种计算比值
// var a = small.offsetWidth - box.offsetWidth;
// var b = big.offsetWidth - bImg.offsetWidth;
// var c = small.offsetHeight - box.offsetHeight;
// var d = big.offsetHeight - bImg.offsetHeight;
// var gx = l* (b/a);
// var gy = t*(d/c);
//设置图片定位
bImg.style.left = gx + 'px';
bImg.style.top = gy + 'px';
}
}
</script>
</head>
<body>
<div id="small">
<img src="./images/dog.jpg" alt="t">
<div id="moveBox"></div>
</div>
<div id="big">
<img src="./images/dog.jpg" alt="t" id="img">
</div>
</body>
</html>
