本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下
普及知识:
放大镜特效涉及到的几个值
offsetWidth 获取元素的宽度
offsetHeight 获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop 内容滚动的上边距
scrollLeft 内容滚动的左边距
onmousemove 鼠标移动事件
onmouseover 鼠标划过事件
主要思路:
1.鼠标移动,阴影区跟着移动
2.鼠标移动,大图也跟着移动
3.阴影区域与小图的比例 以及 大图显示区域与大图的比例 是一样的
4.保证阴影区域以及大div.big在鼠标移动到div.small时显示
html实现
3.
(1)鼠标移动,div.shadow跟着移动,先获取到shadow在small内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及shadow的宽高,让鼠标划过的位置一直位于shadow区域的中心点,所以可得shadow在small内的相对位置,之后进行判断,让shadow不能出边界,最后进行赋值操作
(2)shadow区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和shadow的比例为big.offsetWidth/shadow.offsetWidth,以shadow的左上角为准,大图的滚动距离为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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。