【demo】原生js实现淘宝放大镜

最新推荐文章于 2021-03-11 13:12:23 发布

阿庭

最新推荐文章于 2021-03-11 13:12:23 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： demo

本文链接：https://blog.youkuaiyun.com/weixin_43606809/article/details/95793458

demo 专栏收录该内容

11 篇文章

订阅专栏

博客围绕图形相关内容展开，提及了效果展示，存在的BUG如受窗口移动影响、只能接受特定比例大小的图，解决受窗口移动影响的想法是加入滚轮移动距离变量但未成功，还包含代码及要点相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

BUG

受窗口移动影响（鼠标定位的时候）解决想法是在加上滚轮移动距离的变量目前还没成功（。）
只能接受一个比例大小的图

代码

<div class="bigimg" id="small-box">
	<img src="img/1.jpg" alt="" width="400" height="200" id="big-img">
	<div class="tool" id="tool"></div>
</div>
<div class="big-glass" id="big-glass">
    <img src="img/1.jpg" width="800" height="500" alt="" id="big-pic">
</div>

.bigimg {
	display: inline-block;
	position: relative;
	height: 200px;
	width: 400px;
	background: #e5e5e5;
}
.bigimg img {
	position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	width: 100%;
}
.big-glass {
	position: absolute;
	overflow: hidden;
    float: left;
	top: 50px;
	left: 500px;
	height: 200px;
	width: 200px;
	display: none;
	z-index: 999;
}
.big-glass.active {
	display: block;
}
.big-glass img {
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
}
.tool {
	position: absolute;
	top: 0;
	left: 0;
	height: 100px;
	width: 100px;
	background: #e5e5e5;
	opacity: 0.6;
    filter: alpha(opacity=60);
    display: none;
}
.tool.active {
	display: block;
}

var smallBox = byId("small-box");
var bigBox = byId("big-glass");
var tool = byId("tool");

// 放大镜遮罩层
smallBox.onmouseenter = function(){
	tool.className = "tool active";
	bigBox.className = "big-glass active";
}
smallBox.onmouseleave = function(){
    tool.className = "tool";
    bigBox.className = "big-glass";
}
// 区域随着鼠标移动
smallBox.onmousemove = function(e){
    // 事件对象
    var _e = window.event||e;
    var x = _e.clientX - this.offsetLeft - tool.offsetWidth/2;
    var y = _e.clientY - this.offsetTop - tool.offsetHeight/2;
    // 左移出
    if(x < 0){
        x = 0;
    }
    // 上移出
    if(y < 0){
        y = 0;
    }
    // 右移出
    if(x>this.offsetWidth-tool.offsetWidth){
        x = this.offsetWidth-tool.offsetWidth;
    }
    // 下移出
    if(y>this.offsetHeight-tool.offsetHeight){
        y = this.offsetHeight-tool.offsetHeight;
    }
    tool.style.left = x + "px";
    tool.style.top = y + "px" ;
    bigPic.style.left = -x*2 + "px";
    bigPic.style.top = -y*2 + "px";
}

要点

在这里插入图片描述