<div class="small">
<!-- 小图 -->
<img src="./img/2.jpg" width="200" alt="">
<!-- 遮罩 -->
<div class="mask"></div>
</div>
<div class="big">
<img src="./img/2.jpg">
</div>
</div>
<script>
// 1.当鼠标滑动到当前模块,显示遮罩层和大图
// 1.1获取页面元素
var box = document.getElementById('box')
var samll = document.querySelector('.small')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var bigImag = big.children[0]
console.log(bigImag);
// 通过改变mask、big元素的display属性,控制显隐藏
box.onmouseover = function () {
// 鼠标划上去时显示
mask.style.display = 'block'
big.style.display = 'block'
}
// 移开隐藏
box.onmouseout = function () {
// 鼠标划上去时显示
mask.style.display = 'none'
big.style.display = 'none'
}
// 2.遮罩层跟随鼠标
// 鼠标移动事件
samll.onmousemove = function (e) {
// console.log(e.clientX);
// console.log(e.clientY);
// 动态获取鼠标的xy距离 外框有100的margin值
var x = e.clientX - 100;
var y = e.clientY - 100;
// 动态获取mask元素的宽度
x = x - mask.offsetWidth / 2
y = y - mask.offsetHeight / 2
// 2.02遮罩层移动的区域有限制
// 1).不超过上
if (y < 0) { y = 0 }
// 2).不超过左
if (x < 0) { x = 0 }
// 3).不超过右
// samll.offsetWidth-mask.offsetWidth X值的最大限度
if (x > samll.offsetWidth - mask.offsetWidth) { x = samll.offsetWidth - mask.offsetWidth }
// 4).不超过下
if (y > samll.offsetHeight - mask.offsetHeight) { y = samll.offsetHeight - mask.offsetHeight }
// 动态控制mask元素的left、top
mask.style.top = y + 'px';
mask.style.left = x + 'px';
// 遮罩层移动距离/遮罩层移动最大距离 =
// 大图移动的距离/大图最大移动距离
// 求:大图移动的距离
//大图移动的距离 = 遮罩层移动距离/遮罩层移动最大距离*大图最大移动距离
var bigX;
var bigY;
console.log(x);
bigX = x / (samll.offsetWidth - mask.offsetWidth) * (bigImag.offsetWidth - big.offsetWidth)
bigY = y / (samll.offsetHeight - mask.offsetHeight) * (bigImag.offsetHeight - big.offsetHeight)
// 3.大图展示的区域
bigImag.style.top = - bigY + 'px';
bigImag.style.left = - bigX + 'px'
}
</script>
今天工作无聊随手写了一个放大镜案例 希望对于初学者有用!
猜你喜欢
转载自blog.csdn.net/weixin_55973231/article/details/114646663
今日推荐
周排行