<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
350px;
height: 350px;
position: relative;
margin-left: 200px;
margin-top: 200px;
border: 1px solid #000;
}
.smallBox {
position: relative;
}
.mask {
175px;
height: 175px;
background-color: rgba(125, 125, 125, .4);
position: absolute;
left: 0;
top: 0;
display: none;
}
.bigBox {
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" alt=""/>
<div class="mask"></div>
</div>
<div class="bigBox">
<img src="images/0001.jpg" alt=""/>
</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";
}