介绍 <李> <李> //e。offsetX, offsetY是鼠标的位置//方块的左前在你的鼠标的左上方(网页左上角是原点),因此是减去一个方块的一半。
var x=e。offsetX——方块。offsetWidth/2;
var y=e。offsetY——方块。offsetHeight/2;
方块.style。左=x + & # 39; px # 39;;
方块.style。顶级=y + & # 39; px # 39;; if (x & lt;0){
x=0;
｝
如果(y & lt;0){
y=0;
｝
如果x比;小图。offsetWidth——方块.offsetWidth) {
x=小图。offsetWidth——方块.offsetWidth;
｝
如果(y比;小图。offsetHeight——方块.offsetHeight) {
y=小图。offsetHeight——方块.offsetHeight;
} <李> //第一种方法:需要注意的是这里的左和上得反过来,你鼠标在小图上往下移的时候,对应的大图其实是往上移的。//所以:大图上的左=-小图上的左*他们的缩放倍率
大图.style。显示=癰lock";
大图.style。左=- x *大图。offsetWidth/小图。offsetWidth + & # 39; px # 39;;
大图.style。顶级=- y *大图。offsetHeight/小图。offsetHeight + & # 39; px # 39;;//第二种方法,这里需要注意backgroundPosition的值是从0 - 100%的(得用百分比表示);//需要注意的是何时为百分百,从上面的极端情况判定我们可以知道//x是从0到面具。offsetWidth - rect.offsetWidth;//因此这就是0 - 100%;y同理
大图.style。显示=癰lock";
大图.style。backgroundPosition=" $ {x/(面具。offsetWidth - rect.offsetWidth) * 100} % $ {y/(面具。offsetHeight - rect.offsetHeight) * 100} %’; <李> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title>结核病放大镜& lt;/title>
& lt; style>
.small-box {
位置:相对;
身高:300 px;
｝
.small-pic {
宽度:汽车;
身高:300 px;
｝
.mask {
宽度:526 px;
位置:绝对的;
上图:0;
左:0;
z - index: 1;
高度:100%;
光标:十字丝;
｝
.rect {
位置:绝对的;
上图:0;
左:0;
宽度:100 px;
身高:100 px;
透明度:5;
背景颜色:红色;
z - index: 0;
｝
.big-box {
显示:inline-block;
位置:相对;
宽度:266 px;
身高:266 px;
边界:1 px固体红;
溢出:隐藏;
｝
.big-pic {
位置:绝对的;
宽度:1400 px;
身高:798 px;
上图:0;
左:0;
｝
.big-pic2 {
显示:inline-block;
宽度:266 px;
身高:266 px;
background-size:汽车798 px;
背景图片:url (“https://timgsa.baidu.com/timg?image&质量=80,大?b9999_10000&秒=1550846791000,di=15 edaf7bce643e13b65f70c82d74de30& imgtype=0, src=https://www.yisu.com/zixun/http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg ");
背景位置:0 0;
｝>
这篇文章给大家分享的是有关JavaScript实现淘宝放大镜的方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
这个,当你的鼠标移动到左边的主图上时,右边会出现一个放大的图,暂且就把这个叫做放大镜吧。
大概的做法
第一种,左边一个小图,右边一个原图,当鼠标在小图上移动的时候,通过更改左和上的值来实现同步移动(原图的位置属性设置为绝对)
<李>第二种,鼠标在小图上移动的时候,通过改变原图的背景位置的值来同步移动。
关键操作
第一步,获取鼠标在小图上的位置,并且定位好跟随鼠标的方块(你应该知道是哪个方块吧. .)的位置。
这明显是不足够的!
<强>还需要考虑极端位置/情况
如果只用上面的设置,那么当你的鼠标移动到图片边缘的时候,方块有一半会出现在图片外。
正确的应该是<强>当你的方块触碰到边缘的时候,你的方块就不能在移动了,强尽管你的鼠标还在往下图中“鼠标的有效活动区域”外移动。
那么得加点代码
第二步,控制大图里的左,上或者背景位置
注意事项
我们上面说在小图img上绑定mousemove事件来定位方块,其实实际操作上,我们不能直接用img来绑定,而是得用一个和img一样大小遮罩层来绑定,不然在你鼠标移动的时候,图片会<强>疯狂闪烁,<强>疯狂!疯了!
<李>还有就是函数节流,这个想节流就节流吧。
<李>还有个很重要的,就是<强>右边那个显示大图的p的大小强,一定得是<强>小图上的方块大小*缩放倍率强劲的大小,如果过大,则会多出空白,过小,显示不完全。下面有代码,你可以带回家<强>疯狂测试。
再详细一点
我知道我可能说的不是很详细,所以. .
