原生js实现淘宝放大镜效果
程序员文章站
2022-06-29 13:37:54
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一...
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下javascript基础,用一下基础知识制作一个类似于淘宝的放大镜效果。
先说一下这个效果需要用到的一些基础知识:
css相对定位:position:absolute;
鼠标移入移出以及移动事件:onmouseover、onmouseout、onmousemove,记住这些事件一般不会单个出现
获取鼠标点击坐标:x轴:clientx,y轴:clienty
当前元素相对于父元素的左位移:offsetleft
当前元素相对于父元素的上位移:offsettop
当前元素的实际高、宽度(不包括滚动条):offsetwidth、offsetheight
球当前元素的最小值,最大值:math.min()、math.max();
话不多说直接上代码吧!
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>放大镜效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #demo{ display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #float-box{ position: relative; z-index: 1; } #small-box{ display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; cursor: move; } #big-box{ display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; } #big-box img{ position: absolute; z-index: 5; } </style> </head> <body> <div id="demo"> <div id="float-box"> <div id="small-box"></div> <img src="../images/macbook-small.jpg"> </div> <div id="big-box"> <img src="../images/macbook-big.jpg"> </div> </div> <script type="text/javascript"> window.onload = function(){ //获取到需要的元素 var demo = document.getelementbyid('demo'); var smallbbox = document.getelementbyid('small-box'); var floatbox = document.getelementbyid('float-box'); var bigbox = document.getelementbyid('big-box'); var bigboximg = bigbox.getelementsbytagname('img')[0]; floatbox.onmouseover = function(){ smallbbox.style.display = "block"; bigbox.style.display = "block"; } floatbox.onmouseout = function(){ smallbbox.style.display = "none"; bigbox.style.display = "none"; } floatbox.onmousemove = function(e){ var _event = e || event; console.log(_event.clienty); var l = _event.clientx - demo.offsetleft - floatbox.offsetleft - smallbbox.offsetwidth/2;//除2是因为让鼠标点出现在放大遮罩的中心位置 var t = _event.clienty - demo.offsettop - floatbox.offsettop - smallbbox.offsetheight/2; var demowidth = demo.offsetwidth; var demoheight = demo.offsetheight; var smallbboxwidth = smallbbox.offsetwidth; var smallbboxheight = smallbbox.offsetheight; //鼠标可以移动的最大xy的距离 var maxx = demowidth - smallbboxwidth; var maxy = demoheight - smallbboxheight; l = math.min(maxx,math.max(0,l)); t = math.min(maxy,math.max(0,t)); smallbbox.style.left = l +"px"; smallbbox.style.top = t +"px"; var percentx = l / (floatbox.offsetwidth - smallbboxwidth);//求出小图遮罩的坐标占可移动区域的比例 var percenty = t / (floatbox.offsetheight - smallbboxheight); bigboximg.style.left = -percentx *(bigboximg.offsetwidth - bigbox.offsetwidth) +"px";//大图对的移动方向和小图遮罩的移动方向相反 bigboximg.style.top = -percenty*(bigboximg.offsetheight - bigbox.offsetheight)+"px"; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。