本文实例为大家分享了js放大镜效果展示的具体代码,供大家参考,具体内容如下
具体代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
身体,div, img {
保证金:0;
填充:0;
}
img {
显示:块;
边界:没有;
}
#箱{
位置:绝对的;
上图:20 px;
左:20 px;
宽度:350 px;
身高:350 px;
不必:3 px 3 px 10 px 0 # 111111;
}
#箱img {
宽度:100%;
高度:100%;
}
马克# {
显示:没有;
位置:绝对的;
上图:0;
左:0;
宽度:175 px;
身高:175 px;
背景:# 000;
透明度:0.5;
过滤器:α(不透明度=50);
光标:移动;
}
# boxRight {
显示:没有;
位置:绝对的;
上图:20 px;
左:380 px;
宽度:350 px;
身高:350 px;
溢出:隐藏;
}/*我们右侧的图片的大小是需要严格计算的:
马克的宽度是盒子的宽度的一半,那么我们的大图宽度也应该是小图的二倍
*/# boxRight img {
位置:绝对的;
上图:0;
左:0;
宽度:200%;
高度:200%;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印痹?
& lt; img src=" https://www.yisu.com/zixun/img/iphone.jpg " alt="比;
& lt; div id=奥砜恕弊４? lt;/div>
& lt;/div>
& lt; div id=癰oxRight”比;
& lt; img src=" https://www.yisu.com/zixun/img/iphone_big.jpg " alt="比;
& lt;/div>
& lt; script>//放大镜的原理:我们的马克横向是盒子的一半,纵向也是盒子的一半,那么右侧的大图横向(纵向)应该是左侧小图的2倍
var盒=. getelementbyid(盒);
马克var=. getelementbyid(“马克”);
var boxRight=. getelementbyid (“boxRight”);//设置马克这个盒子
函数setPosition (e) {
var=e。clientY -盒子。offsetTop - (mark.offsetHeight/2);
var=e。clientX -盒子。offsetLeft - (mark.offsetWidth/2);//边界判断
var tempL=0,诱使=0;
var minL=0,薄荷=0,maxL=盒子。offsetWidth——马克。offsetWidth maxT=盒子。offsetHeight——马克。offsetHeight;
如果(left maxL) {
mark.style。左=maxL +“px”;
tempL=maxL;
其他}{
mark.style。左=左+“px”;
tempL=左;
}
如果(top<薄荷){
mark.style。顶级=薄荷+“px”;
诱惑=薄荷;
}else if (top> maxT) {
mark.style。顶级=maxT +“px”;
诱惑=maxT;
其他}{
mark.style。顶级=最高+“px”;
诱惑=最高;
}//右侧图片跟着运动:左侧移动多少,右侧跟着移动他的2倍即可
var oImg=boxRight.getElementsByTagName (img) [0];
oImg.style。左=-tempL * 2 +“px”;
oImg.style。顶级=诱惑* 2 +“px”;
}
盒子。onmouseenter=function (e) {
e=e | | window.event;
mark.style。显示=翱椤?
setPosition (e);
boxRight.style。显示=翱椤?
}
盒子。onmousemove=function (e) {
e=e | | window.event;
setPosition (e);
}
盒子。onmouseleave=function (e) {
e=e | | window.event;
mark.style。显示=懊挥小?
boxRight.style。显示=懊挥小?
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
