javaScript实现放大镜效果

简介: javaScript实现放大镜效果

javaScript实现放大镜效果


放大镜效果图如下:

2个比例核心:
右侧大图宽高设置
    左侧展示图大小 / 遮罩层 = 右侧大图大小? / 右侧放大镜盒子
放大镜移动距离设置
    遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | top / 右侧放大镜盒子宽高

image.png


html机构如下:

<!-- 1.外围盒子 -->
    <div id="warper">
        <!-- 2.左侧展示图 -->
        <div class="leftShow">
            <div class="show">
                <img src="./imgs/ying01.jpg">
                <div class="mask"></div>
            </div>
            <ul>
                <li><a href=""><img src="./imgs/ying01.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying02.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying03.jpg" alt=""></a></li>
                <li><a href=""><img src="./imgs/ying04.jpg" alt=""></a></li>
            </ul>
        </div>
        <!-- 3.右侧放大图 -->
        <div class="rightGlass">
            <img src="./imgs/ying01.jpg" alt="">
        </div>
    </div>


css样式

* {
  padding: 0;
  margin: 0;
}
.active {
  border: 1px solid red;
}
#warper {
  width: 900px;
  margin: 100px;
  overflow: hidden;
}
#warper .leftShow {
  width: 400px;
  height: 400px;
  float: left;
}
#warper .leftShow .show {
  width: 400px;
  height: 350px;
  position: relative;
}
#warper .leftShow .show img {
  width: 100%;
  height: 100%;
}
#warper .leftShow .show .mask {
  width: 100px;
  height: 100px;
  background: rgba(252, 206, 214, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}
#warper .leftShow ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#warper .leftShow ul li {
  list-style: none;
  float: left;
  width: 50px;
  height: 50px;
}
#warper .leftShow ul li a img {
  width: 100%;
  height: 100%;
}
#warper .rightGlass {
  width: 400px;
  height: 400px;
  float: right;
  overflow: hidden;
  position: relative;
}
#warper .rightGlass img {
  position: absolute;
  top: 0;
  left: 0;
}


javaScript:

class Glass {
            constructor(id) {
                this.rootEle = document.querySelector(id)
                this.showEle = this.rootEle.querySelector('.show')
                this.showImg = this.rootEle.querySelector('.show img')
                this.maskEle = this.rootEle.querySelector('.mask')
                this.rightGlass = this.rootEle.querySelector('.rightGlass')
                this.rightImg = this.rootEle.querySelector('.rightGlass img')
                this.ulEles = this.rootEle.querySelectorAll('ul li')
            }
            scale(){
                //注意:遮罩层mask出现后调用此方法才有效
                //showEle宽高 / maskEle宽高 = rightImg宽高?? /rightGlass宽高
                let width = this.showEle.offsetWidth / this.maskEle.offsetWidth * this.rightGlass.offsetWidth
                let height = this.showEle.offsetHeight / this.maskEle.offsetHeight * this.rightGlass.offsetHeight
                this.rightImg.style.width = width + 'px'
                this.rightImg.style.height = height + 'px'
            }
            onGlass() {
                // 保存this=>事件函数中会改变this指向
                let _this = this;
                // 1.鼠标移入showEle,mask遮罩显示
                this.showEle.addEventListener('mouseover', function () {
                    //行内样式设置
                    _this.maskEle.style.display = 'block'; 
                    _this.scale()
                })
                // 2.鼠标移出showEle,mask遮罩隐藏
                this.showEle.addEventListener('mouseout', function () {
                    _this.maskEle.style.display = 'none';
                })
                // 3.鼠标在showEle移动,获得鼠标位置
                this.showEle.addEventListener('mousemove',function(e){
                    //e兼容性设置
                    e = e || window.event;
                    let left = e.offsetX - _this.maskEle.offsetWidth/2;
                    let top = e.offsetY -_this.maskEle.offsetWidth/2;
                    //边界检测
                    if(left<0){
                        left = 0;
                    }
                    if(left > _this.showEle.offsetWidth - _this.maskEle.offsetWidth){
                        left = _this.showEle.offsetWidth - _this.maskEle.offsetWidth
                    }
                    if(top<0){
                        top = 0;
                    }
                    if(top > _this.showEle.offsetHeight - _this.maskEle.offsetHeight){
                        top = _this.showEle.offsetHeight - _this.maskEle.offsetHeight
                    }
                    //光标位置赋值给遮罩层
                    _this.maskEle.style.left = left + 'px';
                    _this.maskEle.style.top = top + 'px';
                    //left / mask宽 = rightImgLeft?? / rightGlass宽
                    let glassLeft = left / _this.maskEle.offsetWidth * _this.rightGlass.offsetWidth
                    let glassTop = top / _this.maskEle.offsetHeight * _this.rightGlass.offsetHeight
                    _this.rightImg.style.top = -glassTop +  'px'
                    _this.rightImg.style.left = -glassLeft +  'px'
                })
            }
            ontab(){
                let _this = this;
                for(let i=0;i<this.ulEles.length;i++){
                    this.ulEles[i].addEventListener('mouseover',function(){
                        //清除所有li样式
                        _this.onclear()
                        //选中li设置样式
                        this.classList.add('active')
                        //showImg图片更换
                        _this.showImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`)
                         //rightImg
                         _this.rightImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`)
                    })
                }
            }
            onclear(){
                for(let i=0;i<this.ulEles.length;i++){
                    this.ulEles[i].classList.remove('active')
                }
            }
        }
        let glass = new Glass("#warper")
        glass.onGlass()
        glass.ontab()
相关文章
|
5月前
|
JavaScript
js类似放大镜(整理)
js类似放大镜(整理)
|
4月前
|
JavaScript 前端开发 算法
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
45 0
|
2月前
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
42 0
|
5月前
|
JavaScript 前端开发 开发者
|
5月前
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
161 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
205 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
131 0

相关产品

  • 云迁移中心