<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width:350px; height: 350px; position: relative; margin-left: 200px; margin-top: 200px; border: 1px solid #000; } .smallBox { position: relative; } .mask { width: 175px; height: 175px; background-color: rgba(125, 125, 125, .4); position: absolute; left: 0; top: 0; display: none;
} .bigBox { width: 400px; height: 400px; position:absolute; left: 350px; top: 0; overflow: hidden; display: none; } </style></head><body><div class="box"> <div class="smallBox"> <img src="images/001.jpg" /> <div class="mask"></div> </div> <div class="bigBox"> <img src="images/0001.jpg" /> </div></div><script src="toolkit.js"></script><script> //需求1：鼠标进入smallBox区域中，显示mask 和 bigBox,移除后隐藏。 var box = document.getElementsByTagName("div")[0]; var smallBox = box.children[0]; var bigBox= box.children[1]; var mask = smallBox.children[1]; var bigImg= bigBox.children[0]; smallBox.onmouseover = function(){ show(mask); show(bigBox); } smallBox.onmouseout = function(){ hide(mask); hide(bigBox); } //需求2：mask 跟随鼠标移动 smallBox.onmousemove = function(event){ //鼠标在网页中位置 event = event || window.event; var pageX = event.pageX || event.clientX + scroll().left; var pageY = event.pageY || event.clientY + scroll().top;
//盒子在网页中位置 var boxX= box.offsetLeft; var boxY = box.offsetTop;
//鼠标在盒子中的位置 var sBoxX = pageX - boxX; var sBoxY = pageY- boxY; //鼠标在盒子中移动位置有界限 if(sBoxX<0){ sBoxX =0; } if(sBoxX>(smallBox.offsetWidth- mask.offsetWidth)){ sBoxX=(smallBox.offsetWidth- mask.offsetWidth) } if(sBoxY<0){ sBoxY =0; } if(sBoxY>(smallBox.offsetHeight- mask.offsetHeight)){ sBoxY=(smallBox.offsetHeight- mask.offsetHeight) } //给mask位置赋值 mask.style.left = sBoxX + "px"; mask.style.top = sBoxY + "px";
//需求3：mask同bigBox等比例移动 //比例公式： smallBox/bigImg = mask/bigBox=sBox/bBox //bBox = bigBox*sBox/mask; var bBoxX = bigBox.offsetWidth*sBoxX/mask.offsetWidth; var bBoxY = bigBox.offsetWidth*sBoxY/mask.offsetHeight;
bigImg.style.marginLeft = -bBoxX + "px"; bigImg.style.marginTop = -bBoxY + "px"; }</script></body></html>引入toolkit.js内容：
function scroll(){ var scroll = { top: window.pageYOffset || document.documentElement.scrollTop, left: window.pageXOffset || document.documentElement.scrollLeft } return scroll;}
function animate(ele,target){ clearInterval(ele.timer); ele.timer = setInterval(function(){ //1.获取步长 var step = (target -ele.offsetLeft)/10; //2.二次处理步长 step = step>0? Math.ceil(step):Math.floor(step); //3、 ele.style.left = ele.offsetLeft+ step +"px"; console.log(1); if(Math.abs(target -ele.offsetLeft)<=Math.abs(step)){ clearInterval(ele.timer); ele.style.left = target + "px"; } },20);}
function client(){ return { "width": window.innerWidth || document.documentElement.clientWidth, "height": window.innerWidth ||document.documentElement.clientWidth, }}
function changeColor(){ if(client().width>960){ document.body.style.backgroundColor="blue"; }else if(client().width>640){ document.body.style.backgroundColor="red"; }else{ document.body.style.backgroundColor="orange"; }}
function getStyle(ele,attr){ if(ele.window.getComputedStyle){ return ele.window.getComputedStyle(ele,null)[attr]; }else{ return ele.currentStyle[attr]; }}
function show(ele){ ele.style.display="block";}
function hide(ele){ ele.style.display="none";}
时间： 2024-10-04 07:28:41