本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下
<>强普及知识:强放大镜特效涉及到的几个值
offsetWidth ,,获取元素的宽度
offsetHeight 获取元素的高度
offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距
offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距
scrollTop 内容滚动的上边距
scrollLeft内容滚动的左边距
onmousemove 鼠标移动事件
onmouseover 鼠标划过事件
<强>主要思路:
,,,1.鼠标移动,阴影区跟着移动
,,2.大鼠标移动,图也跟着移动
,,3.阴影区域与小图的比例以及大图显示区域与大图的比例是一样的
,,4 .保证阴影区域以及大div.big在鼠标移动到div。小时显示
<强> html实现
& lt; div id=癴angdajing”比;
& lt; div类=靶 北?
& lt; img src=" https://www.yisu.com/zixun/small.jpg " alt="比;
& lt; div类=坝白印弊４? lt;/div>
& lt;/div>
& lt; div类=按蟆北?
& lt; img src=" https://www.yisu.com/zixun/big.jpg " alt="比;
& lt;/div>
& lt;/div>
之前
<强> css样式
//定位,大图显示区域和阴影区域最开始不显示
# fangdajing {
宽度:450 px;
身高:450 px;
位置:相对;
}
.small {
宽度:450 px;
身高:450 px;
位置:绝对的;
左:0 px;
上图:0 px;
}
.shadow {
宽度:200 px;
身高:200 px;
背景:黄色;
透明度:0.3;
位置:绝对的;
上图:0;
左:0;
显示:没有;
}
.big {
位置:绝对的;
左:450 px;
宽度:356 px;
身高:356 px;
溢出:隐藏;
显示:没有;
}
之前
<强> js实现
1。获取对象
var fdj=. getelementbyid (“fangdajing”);
var=大document.getElementsByClassName(“大”)[0];
var=document.getElementsByClassName小(小的)[0];
var=document.getElementsByClassName影子(影子)[0];
2。鼠标的移入移出事件,当鼠标移入的时候,显示大图显示区以及阴影区域
小。onmouseover=function () {
big.style。显示=翱椤?
shadow.style。显示=翱椤?
}
之前
3。
(1)鼠标移动,div.shadow跟着移动,先获取到影子在小内的相对位置,已知鼠标点击位置距离页面的边距,fdj距离页面的边距,fdj以及阴影的宽高,让鼠标划过的位置一直位于阴影区域的中心点,所以可得影子在小内的相对位置,之后进行判断,让影子不能出边界,最后进行赋值操作
(2)阴影区域移动,大图显示相应的位置,即大图滚动相应的距离,大图和阴影的比例为big.offsetWidth/shadow.offsetWidth,以影子的左上角为准,大图的滚动距离为左*相应比例
小。onmousemove=函数(ent) {
var e=ent | |事件;//获取鼠标事件对象
var=e。pageX——fdj。offsetLeft - shadow.offsetWidth/2;//获取影子在小内的相对位置
var=e。pageY——fdj。offsetTop - shadow.offsetHeight/2;
var tw=fdj。offsetWidth - shadow.offsetWidth;//获取影子最大可移动距离
var=fdj。offsetHeight - shadow.offsetHeight;//对影子进行限制
如果(左& lt;0) {
左=0;
}else if(左比;tw) {
左=tw;
}
如果(最高& lt;0) {
顶级=0;
}else if(上比;th) {
顶级=th;
}//赋值
small.style。左=左+“px”;
small.style。顶级=最高+“px”;//大图跟着移动
var sl=左*大。offsetWidth/shadow.offsetWidth;
var圣=*大。offsetHeight/shadow.offsetHeight;
大了。scrollTop=圣;
大了。scrollLeft=sl;
}
之前
4。鼠标移出,大图以及阴影隐藏
小。onmouserout=function () {
big.style。显示='没有';
shadow.style。显示='没有';
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
