JS怎么做放大镜特效?(原生JS实现放大镜)

放大镜特效最重要的就是鼠标移动的时候,显示不同的位置的放大部分,其实并不难,只是需要用到一点点数学计算,只要搞清楚了,基本就很简单了,
我想想各位看官应该看一遍就可以了哦!话不多说,直接上代码!
JS部分:
这里需要说道说道了,代码中$('xxxx')这个并不是jquery的方法,而是我用JS封装的返回元素ID的函数。
function $(id) {
return document.getElementById(id)
}
window.onload=function () {
var container=$('container');
var smallBox=$('smallBox');
var floatBox=$('floatBox');
var bigBox=$('bigBox');
var bigBox_img=bigBox.getElementsByTagName('img')[0];

smallBox.onmouseover=function () {
floatBox.style.display='block';
bigBox.style.display='block';
};
smallBox.onmouseout=function () {
floatBox.style.display='none';
bigBox.style.display='none';
};
//--------移动函数----------
smallBox.onmousemove=function (e) {
var event=e||window.event;//兼容事件目标点
var left=event.clientX-container.offsetLeft-smallBox.offsetLeft-(floatBox.offsetWidth/2);
var top=event.clientY-container.offsetTop-smallBox.offsetTop-(floatBox.offsetHeight/2);
//限制范围
if (left<0){ left=0; }else if (left>(smallBox.offsetWidth-floatBox.offsetWidth)){
left=smallBox.offsetWidth-floatBox.offsetWidth+'px';
}
if (top<0){ top=0 }else if(top>smallBox.offsetHeight-floatBox.offsetHeight){
top=smallBox.offsetHeight-floatBox.offsetHeight+'px'

}
floatBox.style.left=left+'px';
floatBox.style.top=top+'px';
//放大部分
var newX=left/(smallBox.offsetWidth-floatBox.offsetWidth)*(bigBox_img.offsetWidth-bigBox.offsetWidth);
var newY=top/(smallBox.offsetHeight-floatBox.offsetHeight)*(bigBox_img.offsetHeight-bigBox.offsetHeight);

bigBox_img.style.left=-newX+'px';
bigBox_img.style.top=-newY+'px';
}
};
需要注意的就是放大部分的计算是怎么来的,这边是等于,小图的offsetWidth减去鼠标经过后显示层的offsetWidth,
然后乘以大图片的offsetWidth-放大部分DIV的offsetWidth两者的差。
20170316101017

运行代码:

提示:你可以先修改部分代码再运行。

  • 微信打赏
若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

Fakin

评论已关闭。