本文实例为大家分享了js放大镜特效的实现代码,供大家参考,具体内容如下
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> Document
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
.imgBox {
宽度:1000 px;
保证金:汽车;
text-align:中心;
}
.small .large {
字体大小:0;
提纲:1 px固体原木色;
保证金:汽车;
}
.small {
保证金:20 px汽车;
}
.large {/*显示:没有。*/}
.small。小img, .large {
宽度:300 px;
身高:200 px;
溢出:隐藏;
}
.large img {
宽度:900 px;
身高:600 px;
}
.small .large {
位置:相对;
}
.mark {
透明度:0.5;
background - color: # DEB887;
z - index: 55;
宽度:100 px;
高度:66.666666666 px;
显示:没有;
}
.mark。大型img {
位置:绝对的;
左:0;
上图:0;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癷mgBox”比;
& lt; div类=靶 北?
& lt; img src=" https://www.yisu.com/zixun/img/img_14.jpg "/比;
& lt; div类="标记"祝辞& lt;/div>
& lt;/div>
& lt; div类="大"比;
& lt; img src=" https://www.yisu.com/zixun/img/img_14.jpg "/比;
& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
$(函数(){
var?美元(“.small”),
马克=美元(“.mark”),
大=美元(“.large”);
美元small.on (“mousemove函数(e) {//在鼠标移到小图片中显示出
美元mark.css(“显示”、“块”);//美元large.css(“显示”、“块”);//获取马克的一半宽度高度
var hw=$ mark.width ()/2,
hh=$ mark.height ()/2;//获取鼠标在当前图片中的位置
var低频=e.pageX - small.offset美元().left-hw,
tt=e.pageY - small.offset美元().top-hh;//获取马克的想x, y轴偏移率
第九var=低频/美元small.width (),
iy=tt/美元small.height ();//获取边缘线
var磅=1-hw/美元small.width () * 2,
结核?1-hh/美元small.height () * 2;//计算和边缘的关系
第九var=ix<磅# 63;ix> 0 & # 63;第九:0:磅,
iy=iy<结核病# 63;iy> 0 & # 63; iy: 0:结核病;//进行大图和小图百分比计算
$ mark.css(“左”,第九* 100 +“%”). css(“顶级”,iy * 100 +“%”);
$ large.children () . css(“左”,第九* 300 +“%”). css(“顶级”,iy * 300 +“%”);
})。(“mouseout函数(){//鼠标移出后马克隐藏
美元mark.css(“显示”,“没有一个”);//美元large.css(“显示”,“没有一个”);
}）
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
