当打开页面时只有图片
首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片。
然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片
最后当鼠标移开后,小的观察框和放大的图片都会消失。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;风格类型=" text/css "比;
#小{
宽度:300 px;
身高:300 px;
边界:1 px固体耐火砖;
浮:左;
位置:相对;
}
#小img {
宽度:100%;
高度:100%;
}
#{面具
宽度:100 px;
身高:100 px;
背景:rgba (0, 0, 0, 0.3);
位置:绝对的;
上图:0;
左:0;
显示:没有;
}
#{大
宽度:300 px;
身高:300 px;
边界:1 px固体hotpink;
溢出:隐藏;
浮:左;
margin-left: 50 px;
位置:相对;
显示:没有;
}
#大img {
位置:绝对的;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {//获取到所有的元素,因为有对应元素的移动,所以在设置样式的,一定要给对应的元素绝对定位,类似于拖拽
var oSmall=. getelementbyid(小),
oMask=. getelementbyid(“面具”),
oBig=. getelementbyid(“大”),
oBigImg=. getelementbyid (“bigImg”);//给当前小的div一个鼠标移入事件
oSmall。onmouseover=function () {//当鼠标移入时,对应的区域显示小的观察框,和对应的右面的放大图片
oMask.style。显示=翱椤?
oBig.style。显示=翱椤?
};
oSmall。onmouseout=function () {//当鼠标移除时对应的区域隐藏
oMask.style。显示='没有';
oBig.style。显示='没有'
}
oSmall。onmousemove=function (ev) {//首先获取到事件事件
var oEvent=ev | |事件;//offsetWidth=本身的样式宽+左右填充+左右边界//clientX clientY获取鼠标指针位置,相对于当前窗口的X和Y坐标//鼠标距离当前窗口左边的距离了l,就为当前鼠标距离窗口左边的距离减去小的观察框的宽度//oMask。offsetWidth/2设置鼠标处于正中心的位置
var l=oEvent。clientX——oMask。offsetWidth/2;
var t=oEvent。clientY——oMask。offsetHeight/2;//对观察框距离的限制,1。当它距离左边的距离比0小的时候,设置它为0就是它移动到最左边的时候
如果(l & lt;0){
l=0;
}else if (l比;oSmall。offsetWidth - oMask.offsetWidth) {//当它移动到最右边的时候,设置它的左值为当前的值
l=oSmall。offsetWidth - oMask.offsetWidth;
};//同理对上下边界进行设置
如果(t & lt;0){
t=0;
}else if (t比;oSmall。offsetHeight - oMask.offsetHeight) {
t=oSmall。offsetHeight - oMask.offsetHeight;
};//设置小的观察框的移动时的当前位置
oMask.style。左=l +“px”;
oMask.style。顶级=t +“px”;//设置对应的右边放大图片对应的位置//var=l/(oSmall规模。offsetWidth - oMask.offsetWidth);//大的可视区域的宽减去小的观察框对应的宽,就是可移动的总距离,当前处的位置,处于总的距离的比例与大图片,在大图片的可视框里所处的位置相同所以如下
oBigImg.style。左=l * (oBig。offsetWidth - oBigImg.offsetWidth)/(oSmall.offsetWidth-oMask.offsetWidth) +“px”;
oBigImg.style。=t * (oBig。offsetHeight - oBigImg.offsetHeight)/(oSmall.offsetHeight-oMask.offsetHeight) +“px”;
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=靶 痹?
& lt; img src=" https://www.yisu.com/zixun/img/s.jpg "/比;
& lt;跨越id="面具"祝辞& lt;/span>
& lt;/div>
& lt; div id=按蟆痹?
& lt; img src=" https://www.yisu.com/zixun/img/b.jpg " id=" bigImg "/比;
& lt;/div>
& lt;/body>
& lt;/html>
还有什么更好的方法互相交流
以上这篇js图片放大镜实例讲解(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
