放大镜
放大镜思路
-
鼠标移入小图像:
放大镜元素显示（display）放大的图片显示（display） -
鼠标移出小图像:
放大镜元素隐藏（display）放大的图片隐藏（display） -
鼠标在小图像中移动:
放大镜跟随、边界限制、放大图片的元素的子标签（img图片放大）、反向等比移动大图片（超出父元素部分隐藏）
放大镜细节处理
元素绑定position属性、display属性、overflow属性；js代码中“px”不要遗忘
window.onload = function () {
//获取元素
var Box = document.getElementById("Box"); // 正常图
var bigBox = document.getElementById("bigBox"); // 放大的图
var lay = document.getElementById("lay"); // 镜子
var bigImg = bigBox.children[0];
//当鼠标移入时Box时
Box.onmouseover = function (ev) {
lay.style.display = "block";
bigBox.style.display = "block";
}
//鼠标移出 Box的时候
Box.onmouseout = function (ev) {
lay.style.display = "none";
bigBox.style.display = "none";
}
//鼠标移动时
Box.onmousemove = function (ev) {
var ev = ev || window.event; //事件源的兼容问题
var scale = 4; //图片的放大比例
//设置放大镜的宽高
lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
lay.style.height = parseInt(Box.offsetHeight / scale) + "px";
//将鼠标放到 放大镜的正中间
var x = ev.clientX - lay.offsetWidth / 2;
var y = ev.clientY - lay.offsetHeight / 2;
if(x < 0){
x = 0; // 左边界的判断，当超出时,置为0
}
//右边界的判断
if(x >= Box.offsetWidth - lay.offsetWidth){
x = Box.offsetWidth - lay.offsetWidth;
}
//上边界的判断
if(y < 0){
y = 0;
}
//下边界的判断
if(y >= Box.offsetHeight - lay.offsetHeight){
y = Box.offsetHeight - lay.offsetHeight;
}
lay.style.left = x + "px";
lay.style.top = y + "px";
//设置一下大图片
bigImg.style.width = Box.offsetWidth * scale + "px";
bigImg.style.height = Box.offsetHeight * scale + "px";
//同等比例移动
var left = lay.offsetLeft * scale;
var top = lay.offsetTop * scale;
//大图的移动， 和放大镜 反向
bigImg.style.marginLeft = (left*(-1)) + "px";
bigImg.style.marginTop = -top + "px";
}
}