四个拥有:无论你有多弱或多强,一定要拥有真正爱你的人,拥有知心的朋友,拥有向上的事业,拥有温暖的住所。
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。