JS实现放大镜效果
首先我们先设想一下放大镜效果
1、当鼠标进入小盒子的时候，把大图片显示出来
2、当指定移动区域的时候，显示当前放大区域（放大效果）
3、鼠标移除我们让它消失
一、实现页面布局HTML+CSS
二、实现放大镜的功能js
下面来看代码，让你思路变清晰
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>放大镜</title> <style> #box{ width: 350px; height: 350px; margin: 100px 0 0 100px; position: relative; } #small_box{ width:100%; height: 100%; border:1px solid #ccc; position: relative; } #mask{ height: 100px; width: 100px;
left: 0px; top: 0px; position: absolute; display: none; cursor: move; } #big_box{ height: 600px; width: 600px; border: 1px solid #ccc; overflow: hidden; top:0px; left: 360px; position: absolute; display: none; } </style> </head> <body> <div id="box"> <div id="small_box"> <img src="img/pic01.jpg" /> <span id="mask"></span> </div> <div id="big_box"> <img src="img/pic001.jpg" style="position: absolute;"/> </div> </div>
<script> window.onload = function(){ //1.获取需要的元素 var box = document.getElementById("box"); var small_box = document.getElementById("small_box"); var big_box = document.getElementById("big_box"); var mask = document.getElementById("mask"); var big_img = big_box.children[0];
//2.鼠标移入小盒子事件 small_box.onmouseover = function(){ //2.1鼠标移入，显示放大镜和大图片 big_box.style.display = ‘block‘; mask.style.display = ‘block‘;
//2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件 small_box.onmousemove = function(event){ // //获取鼠标的坐标点X Y var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5; var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5;
//做边界的校验 if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0，目的是让它不出去 pointX = 0; }else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于（小盒子事件源宽度-指针区域事件源的宽度）时，我们就让它等于那个宽度，防止不出界。 pointX = small_box.offsetWidth-mask.offsetWidth; }
if(pointY<0){ pointY = 0; }else if(pointY>small_box.offsetHeight-mask.offsetHeight){ pointY = small_box.offsetHeight-mask.offsetHeight; }
//移动mask mask.style.left = pointX + ‘px‘; mask.style.top = pointY + ‘px‘;
//移动大图 //小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度 //大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度); big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+‘px‘; big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+‘px‘; } }
//3.鼠标移除小盒子事件 small_box.onmouseout = function(){ //2.1鼠标移入，显示放大镜和大图片 big_box.style.display = ‘none‘; mask.style.display = ‘none‘; } } </script> </body></html>?
注意
移动大图
小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);
big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+‘px‘; big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+‘px‘;
里面的减号指的是方向，方向为反方向，这样才能可以实现你所预想的结果，你可以试一下没有减号的效果你就知道是什么样的了
其它不懂的地方欢迎留言
原文地址：https://www.cnblogs.com/hushengbin789/p/bin12544946122.html
时间： 2024-11-08 22:44:33