前端之家收集整理的这篇文章主要介绍了
原生js简单实现放大镜特效，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例为大家分享了js实现放大镜特效展示的具体代码，供大家参考，具体内容如下
普及知识：
放大镜特效涉及到的几个值
offsetWidth 获取元素的宽度
offsetHeight 获取元素的高度
offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时，获取元素距离父元素的左边距
offsetTop父元素没有定位时，获取元素距离页面的上边距，父元素有定位时，获取元素距离父元素的上边距
scrollTop 内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove 鼠标移动事件
onmouSEOver 鼠标划过事件
主要思路：
1.鼠标移动，阴影区跟着移动
2.鼠标移动，大图也跟着移动
3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
4.保证阴影区域以及大div.big在鼠标移动到div.small时显示
html实现
SEOver = function(){
big.style.display = 'block';
shadow.style.display = 'block';
}
3.
获取鼠标事件对象
var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //
获取shadow在small内的相对位置
var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
var tw = fdj.offsetWidth - shadow.offsetWidth; //
获取shadow最大可移动距离
var th = fdj.offsetHeight - shadow.offsetHeight;
//对shadow进行限制
if(left < 0){
left = 0;
}else if(left > tw){
left = tw;
}
if(top < 0){
top = 0;
}else if(top > th){
top = th;
}
//赋值
small.style.left = left + 'px';
small.style.top = top + 'px';
//大图跟着移动
var sl = left * big.offsetWidth / shadow.offsetWidth;
var st = top * big.offsetHeight / shadow.offsetHeight;
big.scrollTop = st;
big.scrollLeft = sl;
}
