鼠标经过,产品图片的局部放大

原理：两张图片，大div包含两个图片的div，大图片隐藏

找到对象

var box = document.getElementById("box");//大的盒子模块

var smallBox = document.getElementById("smallBox");//小图片

var mask = document.getElementById("mask");//黄色高亮区域

var bigBox = document.getElementById("bigBox");//大图片

var bigImg = bigBox.children[0];//图片

//思路：

//1. 给smallbox注册鼠标经过事件， 让mask显示， 让bigBox显示

//2. 给smallbox注册鼠标离开事件， 让mask隐藏，让bigbox隐藏

//3. 给smallbox注册鼠标移动事件

//3.1 让mask跟着鼠标移动

//3.2 让大图片等比例跟着移动

//1.经过smallbox小图片其他两个显示，离开隐藏

smallbox.onmouseover = function（）{

mask.style.display = "block";

block.style.dispaly = "block";

};

smallbox.onmouseout = function（）{

mask.style.display = "none";

block.style.dispaly = "none";

}

//smallbox鼠标移动事件

smallbox.onmousemove = function(){

mask.style.left = x+"px";//小图片移动多少

maskstyle.top = y+"px";

}

x为多少呢？

mask.style.left以父元素box距离的left值

pagex事件元素的离文档的距离

所以mask.style.left = pagex-box.offsetLeft（box到文档左边界的距离）

//smallbox鼠标移动事件

smallbox.onmousemove = function(){

var x = pageX-box.offsetLeft;

var y = pageY-box.offsetTop;

mask.style.left = x+"px";//小图片移动多少

maskstyle.top = y+"px";

}

运行代码发现，鼠标在mask的左上角再减去mask自身图片的一半，将鼠标放在mask中间，参考上篇盒子移动

//smallbox鼠标移动事件

smallbox.onmousemove = function(){

var x = pageX-box.offsetLeft;

var y = pageY-box.offsetTop;

x = x-mask.offsetWidth/2;

y = y-mask.offsetHeight/2;

mask.style.left = x+"px";//小图片移动多少

maskstyle.top = y+"px";

}

上部，四周都会超出，给四周设定界限，不能超过

if(x<0){

x=0;

}

if(x>smallBox.offsetWidth - mask.offsetWidth){

x=smallBox.offsetWidth - mask.offsetWidth;

}

y同理；

代码如下：

//smallbox鼠标移动事件

smallbox.onmousemove = function(){

var x = pageX-box.offsetLeft;

var y = pageY-box.offsetTop;

if (x < 0) {

x = 0;

}

if (x > smallBox.offsetWidth - mask.offsetWidth) {

x = smallBox.offsetWidth - mask.offsetWidth;

}

if (y < 0) {

y = 0;

}

if (y > smallBox.offsetHeight - mask.offsetHeight) {

y = smallBox.offsetHeight - mask.offsetHeight

}

x = x-mask.offsetWidth/2;

y = y-mask.offsetHeight/2;

mask.style.left = x+"px";//小图片移动多少

maskstyle.top = y+"px";

//移动大图片 大图片移动的距离/mask移动的距离 = 大图片的宽度/smallBox的宽度(原理)

bigImg.style.left = -bigImg.offsetWidth/smallBox.offsetWidth * x + "px";

bigImg.style.top = -bigImg.offsetHeight/smallBox.offsetHeight * y + "px";

}

右边的隐藏的大图跟随mask移动，所以在mask移动事件中移动，直接加上了，因为是反的，所以是负值