JS实现图片放大镜功能

最新推荐文章于 2023-08-30 23:12:02 发布
最新推荐文章于 2023-08-30 23:12:02 发布
阅读量402 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42761735/article/details/84582534
版权

注意将.mask设置成pointer-events: none;  取消它的鼠标事件，否者鼠标移至图片时，会不停的mouseover与mouseout，出现闪动现象

<body>
    <div class='container'>
        <img class='small' src=".\1.jpg" alt="">
        <div class='mask'></div>
        <div class='rightView'>
            <img class='big' src=".\1.jpg" alt="">
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        top: 100px;
        left: 200px;
        width: 400px;
        height: 400px;
        border: 1px solid black;
    }

    .container .mask {
        background: rgba(50, 153, 248, 0.4);
        position: absolute;
        display: none;
        cursor: move;
        pointer-events: none;
    }

    .container .small {
        display: block;
        height: 400px;
        margin: 0 auto;
    }

    .container .rightView {
        display: none;
        position: absolute;
        left: 410px;
        top: 0;
        height: 400px;
        overflow: hidden;
    }

    .container .rightView .big {
        position: absolute;
    }
</style>
<script>
    var container = document.getElementsByClassName('container')[0]
    var rightView = document.getElementsByClassName('rightView')[0]
    var mask = document.getElementsByClassName('mask')[0]
    var bigImg = document.getElementsByClassName('big')[0]
    var smallImg = document.getElementsByClassName('small')[0]

    // 鼠标移至图片时，mask与rightView显示
    smallImg.addEventListener('mouseover', function () {
        rightView.style.display = 'block'
        mask.style.display = 'block'
    })

    // 鼠标移出图片时，mask与rightView消失
    smallImg.addEventListener('mouseout', function () {
        rightView.style.display = 'none'
        mask.style.display = 'none'
    })

    // 鼠标在图片上移动时的代码
    smallImg.addEventListener('mousemove', function (e) {
        e = e || window.event
        //设置rightView的宽度和mask的长宽
        rightView.style.width = smallImg.offsetWidth    
        mask.style.width = smallImg.offsetWidth * 2 / 5
        mask.style.height = smallImg.offsetHeight * 2 / 5
        //smallImg的高度在css中规定，对于不同的图片，左右会有一个空隙，mouseX的值要减去这个空隙值
        mouseX = e.pageX - container.offsetLeft - smallImg.offsetLeft - mask.offsetWidth / 2  
        mouseY = e.pageY - container.offsetTop - mask.offsetHeight / 2
        //鼠标移至smallImg的边缘时，mask应该保持在smallImg之内
        if (mouseX <= 0) {
            mouseX = 0
        }
        if (mouseY <= 0) {
            mouseY = 0
        }
        let maxScopeX = smallImg.offsetWidth - mask.offsetWidth
        let maxScopeY = smallImg.offsetHeight - mask.offsetHeight
        if (mouseX >= maxScopeX) {
            mouseX = maxScopeX
        }
        if (mouseY >= maxScopeY) {
            mouseY = maxScopeY
        }
        //mask是相对container定位的，要想不出smallImg，就要加上空隙的值
        mask.style.left = mouseX + smallImg.offsetLeft + 'px'
        mask.style.top = mouseY + 'px'
        //mask相对smallImg的位置等同于rightView相对于bigImg的位置，计算他们的比列就能使mask与rightView的显示区域相同
        imgProportion = (bigImg.offsetHeight - rightView.offsetHeight) / (smallImg.offsetHeight - mask.offsetHeight)
        bigImg.style.left = -imgProportion * mouseX + 'px'
        bigImg.style.top = -imgProportion * mouseY + 'px'
    })
</script>

 

 

QingYun911
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript实现图片的放大镜功能效果
06-17
以前写过一个jQuery的图片放大效果,但是存在着一些小问题,然后最近有时间重写了一遍,做了很详尽的改进.改进了大部分bug,而且不采用jQuery. 程序说明 主要为magnifier类,里面的主要方法有： init：运行方法 start：则是鼠标移入div的事件处理 move：则是鼠标在div中移动的事件处理 end：鼠标移出后的事件处理
JS实现图片放大镜功能文章资源下载
最新发布
09-03
【JS案例】专栏将持续更新原生JS案例，提供一些工作中也能用上的一些小案例，详细讲解分析，提升JS开发水平与开发思路的积累，如果文中出现有瑕疵的地方各位通过评论或者私信联系我，我们一起进步，有兴趣的伙伴可以...
js实现图片放大镜
iuukai
12-17 348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; box-sizing: border-box; } .wrap { width: 400px; hei.
js实现图片放大镜效果
weixin_49696014的博客
01-08 321
<!DOCTYPE html> <html lang="zh-CN"> <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
js实现图片的放大镜功能
han_han__的博客
09-13 1402
js实现图片的放大镜功能
JS实现图片放大镜效果的方法
10-24
通过`magnifier.js`插件，开发者可以快速实现图片放大镜效果，为用户提供更好的视觉体验。这个插件不仅可以用于商品展示，还可以应用于任何需要详细查看图片内容的场景。了解并掌握这种效果的实现方式，对于提升网页...
原生javascript实现图片放大镜效果
10-20
原生JavaScript实现图片放大镜效果的知识点涵盖了HTML、CSS和JavaScript的结合使用，旨在通过客户端技术创建一种互动的用户体验，类似于在线商城产品展示中常见的放大镜效果。以下将详细阐述实现这一效果所需掌握的...
js canvas实现放大镜查看图片功能
10-19
5. 放大镜效果的绘制：这一步是实现放大镜功能的核心，涉及到具体算法的实现。通过计算鼠标当前所在位置，以及放大倍数，来决定放大镜的视图窗口。通常，这部分需要结合Canvas 2D上下文的API，如drawImage等，来绘制...
原生js实现图片放大镜效果
03-30
以上就是使用原生JavaScript实现图片放大镜效果的基本步骤。你可以根据需求调整样式、动画效果等，以满足不同场景的应用。这种方法不仅适用于简单的图片放大，还可以扩展到其他交互式元素，如产品细节展示等。
JS图片放大镜
03-14
原生javascript图片放大镜，苏宁商城图片放大镜效果，放大
JS动态实现图片放大
04-11
NULL 博文链接：https://haohao0529.iteye.com/blog/1683583
JS版的图片放大镜
不想写代码的一天
05-23 509
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; ...
js实现放大镜效果(图片放大)—JavaScript
热门推荐
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
JS(jquery)实现图片放大镜效果
上善若水.class
04-21 6302
本例中主要用到了jquery.js，jquery.jqzoom.js以及样式jqzoom.css， 为了演示方便,这里引用了一个购物网站的绝对路径，大家可以把jquery代码下过来自己用 .应用参考:http://www.vancl.com/ProductInfo/1120222.htmlimg标签中的 alt是大图片的路径， src是小图片的路径， class=jqzoom，设置样式，
【JS案例】JS实现图片放大镜功能
Ghmin的博客
08-30 3340
原生JS实现图片放大镜效果，详细讲解一步步操作，完整代码
图片放大镜（有意思的JS 二）
Zhangguohao666的博客
02-21 1216
28800秒，给你带来超有意思的放大镜效果
js 图片放大镜效果
weixin_40030173的博客
04-16 248
<!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>Do.
vue2放大镜功能实现
08-10
要实现Vue 2的放大镜功能，你可以按照以下步骤进行操作： 1. 首先，确保你已经在项目中引入了Vue 2。 2. 在需要使用放大镜功能的组件中，定义一个data属性用于存储放大镜的状态，例如： ```javascript data() { return { zoomed: false, // 放大镜状态，默认为false mouseX: 0, // 鼠标X轴坐标 mouseY: 0, // 鼠标Y轴坐标 zoomX: 0, // 放大镜X轴坐标 zoomY: 0, // 放大镜Y轴坐标 } }, ``` 3. 在模板中，使用`v-on`指令监听鼠标移动事件，并更新鼠标坐标： ```html <template> <div @mousemove="updateMousePosition"> <!-- 图片展示区域 --> <div class="image-container"> <img src="path/to/image.jpg" alt="Image"> </div> <!-- 放大镜区域 --> <div v-if="zoomed" class="zoom-container" :style="{ left: zoomX + 'px', top: zoomY + 'px' }"> <img src="path/to/image.jpg" alt="Zoomed Image"> </div> </div> </template> ``` 4. 在方法中，实现更新鼠标坐标和放大镜位置的逻辑： ```javascript methods: { updateMousePosition(event) { this.mouseX = event.clientX; this.mouseY = event.clientY; this.updateZoomPosition(); }, updateZoomPosition() { const container = document.querySelector('.image-container'); const zoomContainer = document.querySelector('.zoom-container'); if (container && zoomContainer) { const containerRect = container.getBoundingClientRect(); const zoomContainerRect = zoomContainer.getBoundingClientRect(); // 根据鼠标坐标和图片容器位置计算放大镜位置 this.zoomX = this.mouseX - containerRect.left - zoomContainerRect.width / 2; this.zoomY = this.mouseY - containerRect.top - zoomContainerRect.height / 2; // 限制放大镜位置在图片容器内部 this.zoomX = Math.max(0, Math.min(this.zoomX, containerRect.width - zoomContainerRect.width)); this.zoomY = Math.max(0, Math.min(this.zoomY, containerRect.height - zoomContainerRect.height)); } } } ``` 5. 最后，添加一些CSS样式来定义图片容器和放大镜的样式： ```css .image-container { position: relative; } .zoom-container { position: absolute; width: 200px; /* 自定义放大镜的宽度 */ height: 200px; /* 自定义放大镜的高度 */ border: 1px solid #ccc; pointer-events: none; /* 防止放大镜影响鼠标事件 */ } ``` 这样，你就可以在Vue 2中实现一个简单的放大镜功能了。当鼠标在图片上移动时，会显示一个放大的镜头，跟随鼠标移动并显示放大的图像。根据需要，你可以自定义放大镜的样式和放大倍数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值