好资源导航 » 文章资讯 » 原生js简单实现放大镜特效

原生js简单实现放大镜特效

2024-02-23 17:56:05 63

本文实例为大家分享了js实现放大镜特效展示的具体代码，供大家参考，具体内容如下

普及知识：放大镜特效涉及到的几个值

offsetWidth 获取元素的宽度
offsetHeight 获取元素的高度
offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时，获取元素距离父元素的左边距
offsetTop父元素没有定位时，获取元素距离页面的上边距，父元素有定位时，获取元素距离父元素的上边距
scrollTop 内容滚动的上边距
scrollLeft内容滚动的左边距
onmousemove 鼠标移动事件
onmouseover 鼠标划过事件

主要思路：

1.鼠标移动，阴影区跟着移动
2.鼠标移动，大图也跟着移动
3.阴影区域与小图的比例以及大图显示区域与大图的比例是一样的
4.保证阴影区域以及大div.big在鼠标移动到div.small时显示

html实现

css样式

//定位，大图显示区域和阴影区域最开始不显示
#fangdajing{
width:450px;
height:450px;
position:relative;
}
.small{
width:450px;
height:450px;
position:absolute;
left:0px;
top:0px;
}
.shadow{
width:200px;
height:200px;
background:yellow;
opacity:0.3;
position:absolute;
top:0;
left:0;
display:none;
}
.big{
position:absolute;
left:450px;
width:356px;
height:356px;
overflow:hidden;
display:none;
}

js实现

1.获取对象

varfdj=document.getElementById('fangdajing');
varbig=document.getElementsByClassName('big')[0];
varsmall=document.getElementsByClassName('small')[0];
varshadow=document.getElementsByClassName('shadow')[0];

2.鼠标的移入移出事件，当鼠标移入的时候，显示大图显示区以及阴影区域

small.onmouseover=function(){
big.style.display='block';
shadow.style.display='block';
}

（1）鼠标移动，div.shadow跟着移动，先获取到shadow在small内的相对位置，已知鼠标点击位置距离页面的边距，fdj距离页面的边距，fdj以及shadow的宽高，让鼠标划过的位置一直位于shadow区域的中心点，所以可得shadow在small内的相对位置，之后进行判断，让shadow不能出边界，最后进行赋值操作

（2）shadow区域移动，大图显示相应的位置，即大图滚动相应的距离，大图和shadow的比例为big.offsetWidth/shadow.offsetWidth，以shadow的左上角为准，大图的滚动距离为left*相应比例

small.onmousemove=function(ent){
vare=ent||event;//获取鼠标事件对象
varleft=e.pageX-fdj.offsetLeft-shadow.offsetWidth/2;//获取shadow在small内的相对位置
vartop=e.pageY-fdj.offsetTop-shadow.offsetHeight/2;
vartw=fdj.offsetWidth-shadow.offsetWidth;//获取shadow最大可移动距离
varth=fdj.offsetHeight-shadow.offsetHeight;
//对shadow进行限制
if(left<0){
left=0;
}elseif(left>tw){
left=tw;
}
if(top<0){
top=0;
}elseif(top>th){
top=th;
}
//赋值
small.style.left=left+'px';
small.style.top=top+'px';
//大图跟着移动
varsl=left*big.offsetWidth/shadow.offsetWidth;
varst=top*big.offsetHeight/shadow.offsetHeight;
big.scrollTop=st;
big.scrollLeft=sl;
}

4.鼠标移出，大图以及shadow隐藏

small.onmouserout=function(){
big.style.display='none';
shadow.style.display='none';
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

原生js简单实现放大镜特效

热门推荐

随机推荐