作者:云聪京初瑞子_617 | 来源:互联网 | 2020-08-13 10:07
本篇文章给大家带来的内容是关于Javascript实现淘宝放大镜的两种方法介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
啥是淘宝放大镜
这个,当你的鼠标移动到左边的主图上时,右边会出现一个放大的图,暂且就把这个叫做放大镜吧。
大概的做法
关键操作
//e.offsetX ,offsetY是鼠标的位置
//方块的left top在你的鼠标的左上方(网页左上角是原点),因此是减去一个方块的一半。
var x = e.offsetX - 方块.offsetWidth / 2;
var y = e.offsetY - 方块.offsetHeight / 2;
方块.style.left = x + 'px';
方块.style.top = y + 'px';
这明显是不足够的!
还需要考虑极端位置/情况
如果只用上面的设置,那么当你的鼠标移动到图片边缘的时候,方块有一半会出现在图片外。
那么得加点代码
if (x <0) {
x = 0;
}
if (y <0) {
y = 0;
}
if (x > 小图.offsetWidth - 方块.offsetWidth) {
x = 小图.offsetWidth - 方块.offsetWidth;
}
if (y > 小图.offsetHeight - 方块.offsetHeight) {
y = 小图.offsetHeight - 方块.offsetHeight;
}
//第一种方法:需要注意的是这里的left 和 top得反过来,你鼠标在小图上往下移的时候,对应的大图其实是往上移的。
//所以:大图上的left = -小图上的left * 他们的缩放倍率
大图.style.display = "block";
大图.style.left = -x * 大图.offsetWidth / 小图.offsetWidth + &#39;px&#39;;
大图.style.top = -y * 大图.offsetHeight / 小图.offsetHeight + &#39;px&#39;;
//第二种方法,这里需要注意 backgroundPosition的值是从0 - 100%的(得用百分比表示);
//需要注意的是何时为百分百,从上面的极端情况判定我们可以知道
//x 是从0 到 mask.offsetWidth - rect.offsetWidth;
//因此这就是0 - 100%;y同理
大图.style.display = "block";
大图.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;
注意事项
再详细一点
我知道我可能说的不是很详细,所以。。
以上就是Javascript实现淘宝放大镜的两种方法介绍(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!