js实现简单放大镜效果_js放大镜资源-CSDN文库

absolute

js代码

100 浏览量 2020-11-20 23:13:52 上传评论收藏 83KB PDF 举报

资源推荐

资源详情

资源评论

js实现简单放大镜效果实现简单放大镜效果

用js实现简单放大镜效果，供大家参考，具体内容如下

此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动

时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码：

css样式代码如下：

<style>

.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}

.s_box img{width: 400px;height: 300px;}

.s_box span{width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}

.b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}

.b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}

.list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}

.list li{float: left;margin: 0 10px;}

.list li img{width: 100px;height: 80px;}

</style>

html代码如下：

<body>

</div>

</div>

</ul>

</body>

js主要代码如下：

// 分析:

// 1.选择元素

// 2.绑定事件

// 3.进入的时候显示元素

// 4.移动：遮罩层跟随鼠标移动的同时计算遮罩层的移动比例、右侧大图，等比例移动

// 5.离开的时候隐藏元素

class Large{

constructor(){

this.sBox = document.querySelector(".s_box");

this.sImg = document.querySelector(".s_box img");

this.sSpan = document.querySelector(".s_box span");

this.bBox = document.querySelector(".b_box");

this.bImg = document.querySelector(".b_box img");

// 点击小图切换大图的按钮

this.li = document.querySelectorAll(".list li");

}

addEvent(){

var that = this;

this.sBox.onmouseover = function(){

that.over();

}

this.sBox.onmousemove = function(eve){

var e = eve || window.event;

that.move(e);

}

this.sBox.onmouseout = function(){

that.out();

}

// 切换图片按钮的点击事件：根据布局做出调整

for(var i=0;i<this.li.length;i++){

this.li[i].onclick = function(){

that.sImg.src = this.children[0].src;

that.bImg.src = this.children[0].src;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38694006

粉丝: 6
资源: 923

js实现简单放大镜效果

用js实现放大镜的效果的简单实例

用JS实现放大镜特效

js实现局部放大镜效果

js放大镜效果代码 超强的可以任意拖动放大

JS图片放大镜

JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】

js淘宝放大镜效果代码

通过js代码实现图片切换和放大镜等效果

js仿京东主图放大镜特效

图片局部放大效果JS+CSS

简单实现js放大镜效果

用js实现放大镜效果

javascript放大镜效果的简单实现

js 放大镜效果

js图片放大镜源码

利用javascript实现的三种图片放大镜效果实例（附源码）

js放大镜（适用于商品详情）

JS放大镜,JavaScript图片放大代码.rar

js放大镜效果

放大镜js效果

js实现的图片放大镜效果

extm.js 实现放大镜效果

js实现图片放大镜效果

原生js实现放大镜效果

破解版的js放大镜，很好用，仿ppg放大镜效果

8种js放大镜效果.

简单实现Android放大镜效果

最新资源

js放大镜效果代码超强的可以任意拖动放大