ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

js实现放大镜多种写法

2022-04-26 20:33:29  阅读：134  来源： 互联网

标签：style width 放大镜 mask js middle var 写法 middleBox 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .enlarge{
        width: 400px;
        height: 400px;
        margin: 50px auto;
    }
    .middle{
        width: 400px;
        height: 400px;
        /* border: 3px solid skyblue; */
        position: relative;
    }
    .middle>img{
        width: 100%;
        height: 100%;
    }
    .middle .mask{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 0 , 0.5);
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
    }
    .middle .mask:hover{
        cursor: move;
    }
    .middle .big{
        width: 400px;
        height: 400px;
        /* border: 3px solid skyblue; */
        position: absolute;
        left: 105%;
        top: 0px;
        overflow: hidden;
        display: none;
    }
    .middle .big img{
        width: 1600px;
        height: 1600px;
        position: absolute;
        left: 0px;
        top: 0px;
    } 
    .small img{
        width: 100px;
        height: 100px;
        margin: 10px 5px;
        border: 3px solid skyblue;
    }
    .small img.active{
        border-color: red;
    }
</style>
<body>
    <div class="enlarge">
        <div class="middle">
            <img src="../4/images/3.JPG" alt="">
            <div class="mask"></div>

            <div class="big">
                <img src="../4/images/3.JPG" alt="">
            </div>
        </div>
        <div class="small">
            <img class="active" src="../4/images/3.JPG" alt="">
            <img src="../4/images/2.jpg" alt="">
        </div>
    </div>
    
</body>
<script>
//获取操作对象
var middleBox = document.querySelector('.middle');
var middleImg = document.querySelector('.middle>img')
var mask= document.querySelector('.mask');
var bigBox = document.querySelector('.middle .big');
var bigImg = document.querySelector('.middle .big>img');
var smallImgs = document.querySelectorAll('.small img');

//给middle盒子绑定事件
middleBox.onmouseover = function() {
    // console.log('鼠标移入成功');
    mask.style.display = 'block';
    bigBox.style.display = 'block';
}
//给middle盒子解绑事件
middleBox.onmouseout = function() {
    // console.log('鼠标已移出');
    mask.style.display = 'none'
    bigBox.style.display = 'none'
}

//获取鼠标移动的位置
middleBox.onmousemove = function() {
    //兼容写法
    var e = e || window.event
    //计算蒙板层的位置
    var l = e.pageX - middleBox.offsetLeft - parseInt(mask.offsetWidth/2)
    var t = e.pageY - middleBox.offsetTop - parseInt(mask.offsetHeight/2)
    //设置边界
    var x = middleBox.offsetWidth - mask.offsetWidth
    var y = middleBox.offsetHeight - mask.offsetHeight
    //图片移动距离
    var imgX,imgY

    if(l <= 0) {
        imgX = 0
        mask.style.left = '0px'
    } else if(l >= x) {
        imgX = x
        mask.style.left = x + 'px'
    } else {
        imgX = l
        mask.style.left = l + 'px'
    }

    if(t <= 0) {
        imgY = 0
        mask.style.top = '0px'
    } else if(t >= x) {
        imgY = x
      mask.style.top = y + 'px' 
    } else {
        imgY = t
        mask.style.top = t + 'px'
    }

    bigImg.style.left = -4*imgX + 'px'
    bigImg.style.top = -4*imgY + 'px'


    //小图切换
    for(let i=0;i<smallImgs.length;i++) {
        //给所有小图片添加点击事件
        smallImgs[i].onclick = function() {
        //切换小图样式
            for(let j=0;j<smallImgs.length;j++) {
                smallImgs[j].className = ''
            }
            
            smallImgs[i].className = 'active'
          
            middleImg.src = bigImg.src = smallImgs[i].src

        }
    }
}

</script>
</html>

效果:

 

 面向对象写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .enlarge{
        width: 406px;
        margin: 50px auto;
    }
    .middle{
        width: 400px;
        height: 400px;
        border: 3px solid skyblue;
        position: relative;
    }
    .middle>img{
        width: 400px;
        height: 400px;
    }
    .middle .mask{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 0, .6);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .middle .mask:hover{
        cursor: move;
    }
    .middle .big{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: absolute;
        left:105%;
        top: 0;
        overflow: hidden;
        display: none;
    }
    .middle .big img{
        width: 1600px;
        height: 1600px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .small img{
        width: 100px;
        height: 100px;
        margin: 10px 5px;
        border: 3px solid #000;
    }
    .small img.active{
        border-color: red;
    }
</style>
<body>
<div class="enlarge">
    <div class="middle">
        <img src="../image/3.webp" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="../image/3.webp" alt="">
        </div>
    </div>
    <div class="small">
        <img class="active" src="../image/3.webp" alt="">
        <img src="../image/1.webp" alt="">
        <img src="../image/9.webp" alt="">
    </div>
</div>
</body>
<script>
//1.创建一个空的构造函数
function Enlarge(leiming) {
//3.获取标签 - 作为对象属性
    this.container = document.querySelector('.'+leiming);
    //在指定的大盒子中获取标签元素
    this.middleBox = this.container.querySelector('.middle');
    this.mask = this.container.querySelector('.mask');
    this.bigBox = this.container.querySelector('.big');
    this.middleImg = this.container.querySelector('.middle>img');
    this.bigImg = this.container.querySelector('.middle .big>img');
    this.smallImgs = this.container.querySelectorAll('.small img');

    this.init()
}
//4.将事件放在一个方法中
Enlarge.prototype.init = function() {
    //点击小图切换中图和大图
    for(let i=0;i<this.smallImgs.length;i++) {
        this.smallImgs[i].onclick = () => {
            //换小图样式
            for(let j=0;j<this.smallImgs.length;j++) {
                this.smallImgs[j].className = ''
            }
            this.smallImgs[i].className = 'active'

            //切换中图和大图
            this.bigImg.src = this.middleImg.src = this.smallImgs[i].src 
        }
    }
    //鼠标移入显示
    this.middleBox.onmouseover = () => {
        this.mask.style.display = this.bigBox.style.display = 'block'
    
        //鼠标在中盒子中移动,让遮罩也跟着鼠标移动
        this.middleBox.onmousemove = () => {
            // console.log(111,this);
            var x = window.event.pageX
            var y = window.event.pageY
            // console.log(x,y);
            //计算遮罩的left和top的值
            var l = x - this.middleBox.offsetLeft - this.mask.offsetWidth/2 - parseInt(getComputedStyle(this.middleBox)['border-left-width'])
            var t = y - this.middleBox.offsetTop - this.mask.offsetHeight/2 - parseInt(getComputedStyle(this.middleBox)['border-top-width'])
            //限制最小值和最大值
            if(l < 0) {
                l = 0
            }
            if(t < 0) {
                t = 0
            }
            if(l > this.middleBox.clientWidth - this.mask.offsetWidth) {
                l = this.middleBox.clientWidth - this.mask.offsetWidth
            }
            if(t > this.middleBox.clientHeight - this.mask.offsetHeight) {
                t = this.middleBox.clientHeight - this.mask.offsetHeight
            }
            //设置遮罩的let和top的值
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            //调用图片移动的方法
            this.bigImgMove(l,t)
        }
    }
    //鼠标移出隐藏
    this.middleBox.onmouseout = () => {
        this.mask.style.display = this.bigBox.style.display = 'none'
    }
}
//大盒子图片移动的方法
Enlarge.prototype.bigImgMove = function(l,t) {
    //计算遮罩在中盒子中左边距离占据中盒子的宽度的比例
    var percentX = l / this.middleBox.clientWidth
    var percentY = t / this.middleBox.clientHeight
    //获取大图的宽高
    var bigImgWidth = this.bigImg.clientWidth
    var bigImgHeight = this.bigImg.clientHeight
    //根据比例计算大图应该移动的left和top的距离
    var bigLeft = percentX * bigImgWidth
    var bigTop = percentY * bigImgHeight
    //设置大图的位置
    this.bigImg.style.left = -bigLeft + 'px'
    this.bigImg.style.top = -bigTop + 'px'


}
//2.new调用
var e = new Enlarge('enlarge')//将放大镜的大盒子范围当做实参传入
</script>
</html>

效果：

 

标签：style,width,放大镜,mask,js,middle,var,写法,middleBox
来源： https://www.cnblogs.com/bg618/p/16196318.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有