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()
相关文章
|
JavaScript
js类似放大镜(整理)
js类似放大镜(整理)
|
6月前
|
JavaScript 前端开发
JavaScript实现放大镜效果
JavaScript实现放大镜效果
28 0
|
JavaScript 前端开发 算法
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
89 0
|
11月前
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
128 0
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
348 1
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
163 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
|
存储 机器学习/深度学习 JavaScript
JS 你最少用几行代码实现深拷贝?
JS 你最少用几行代码实现深拷贝?
JS 你最少用几行代码实现深拷贝?
|
JavaScript 前端开发 算法
JavaScript实现一段时间之后关闭广告
简介:通过JavaScript实现在一段时间之后,广告消失。
133 0
JavaScript实现一段时间之后关闭广告