本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下
普及知识:放大镜特效涉及到的几个值
offsetWidth 获取元素的宽度
offsetHeight 获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop 内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove 鼠标移动事件
onmouseover 鼠标划过事件
主要思路:
1.鼠标移动,阴影区跟着移动
2.鼠标移动,大图也跟着移动
3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
4.保证阴影区域以及大div.big在鼠标移动到div.small时显示
html实现
<div id="fangdajing"> <div class="small"> <img src="small.jpg" alt=""> <div class="shadow"></div> </div> <div class="big"> <img src="big.jpg" alt=""> </div> </div>
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.获取对象
var fdj = document.getElementById('fangdajing'); var big = document.getElementsByClassName('big')[0]; var small = document.getElementsByClassName('small')[0]; var shadow = document.getElementsByClassName('shadow')[0];
2.鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域
small.onmouseover = function(){ big.style.display = 'block'; shadow.style.display = 'block'; }
3.
(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){ var e = ent || event; //获取鼠标事件对象 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; }
4.鼠标移出,大图以及shadow隐藏
small.onmouserout = function(){ big.style.display = 'none'; shadow.style.display = 'none'; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。