js 放大镜 单张图片

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            margin: 100px;
            border: 1px solid red;
            position: relative;
        }

        /*big的宽度为400，但是big下的img宽度为800，设置了big的overflow为hidden，所以图片只看到一部分*/
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
            border:1px solid red;
        }
        /*遮盖层，鼠标移上去的时候显示的黄色小块*/
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById('box');
            var small = document.getElementsByClassName('small')[0];
            var small_img = small.getElementsByTagName('img')[0];
            var mask = document.getElementsByClassName('mask')[0];
            var big = document.getElementsByClassName('big')[0];
            var big_img = big.getElementsByTagName('img')[0];
            // 给small添加mousehover，mouseout事件
            // onmouseenter不支持冒泡事件，所以不用onmouseover
            small.onmouseenter = function(){
                mask.style.display="block";
                big.style.display="block";
            }
            small.onmouseleave = function(){
                mask.style.display="none";
                big.style.display="none";
            }
            small.onmousemove = function(){
                // 获取鼠标相对small的top和left
                var mouseX = event.pageX - box.offsetLeft;
                var mouseY = event.pageY - box.offsetTop;
                // 获取小黄块相对small的位置
                var maskX = mouseX - mask.offsetWidth/2;
                var maskY = mouseY - mask.offsetHeight/2;
                // 控制小黄块在small内
                var maskXmax = small.offsetWidth-mask.offsetWidth;
                var maskYmax = small.offsetHeight-mask.offsetHeight;
                if(maskX<0){
                    maskX = 0;
                }
                if(maskY<0){
                    maskY = 0;
                }
                if(maskX>maskXmax){
                    maskX = maskXmax;
                }
                if(maskY>maskYmax){
                    maskY = maskYmax;
                }
                mask.style.left= maskX+"px";
                mask.style.top= maskY+"px";

                // 根据小图比例 控制大图位置
                // mask移动的距离 / mask最大能够移动的距离  = 大图片移动的距离 / 大图片最大能够移动的距离
                var bigX = maskX / maskXmax * (big_img.offsetWidth-big.offsetWidth);
                var bigY = maskY / maskYmax * (big_img.offsetHeight-big.offsetHeight);
                big_img.style.top= -bigY+"px";
                big_img.style.left= -bigX+"px";

            }


        }
    	
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="small">
            <img src="small.jpg" width="350" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="big.jpg" width="800" alt=""/>
        </div>
    </div>
</body>

<script>
    
</script>
</html>

 

人生海海丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
放大镜 js
Isabeldeng的博客
11-19 90
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { p
js图片局部放大镜效果
huntererer的博客
12-10 6493
在购物网站的展示页面中常常能看到跟随鼠标移动而移动焦点的放大镜效果，实现这种效果的方法很多，这里给出一种。 你需要一张大图和一张缩小尺寸的小图，小图在界面中显示，大图用来构造放大效果。<div id="mirror"></div> <div id="pic"> <img src="E:/com/front_end/source/middle_About.jpg">
JavaScript图片放大镜的原理和具体实现，以vue演示代码，其他框架类似
sxww_zyt的博客
05-24 442
笔者为了方便，这里使用vue来演示，其他框架也是一样的原理。简言之，就是遮罩层与放大图片区域的比例应该和大小图放大比例保持一致，使用相对定位和绝对定位。
【JS案例】JS实现图片放大镜功能
最新发布
Ghmin的博客
08-30 3302
原生JS实现图片放大镜效果，详细讲解一步步操作，完整代码
JavaScript实现放大镜效果
awangpen的博客
03-18 206
利用JavaScript实现放大镜效果
js实现放大镜效果(图片放大)—JavaScript
热门推荐
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
图片放大镜（有意思的JS 二）
Zhangguohao666的博客
02-21 1207
28800秒，给你带来超有意思的放大镜效果
jquery单张图片放大效果.zip
11-20
本项目“jquery单张图片放大效果”利用了jQuery库来创建这种效果，结合CSS和HTML5技术，为用户提供一种简洁而直观的图片查看体验。下面我们将详细探讨这个项目中的关键技术点。 首先，jQuery是一个广泛使用的...
纯js图片放大镜插件-Magnifier
12-11
【纯js图片放大镜插件-Magnifier】是一款利用JavaScript技术实现的图片浏览增强工具，旨在为用户提供一种直观、便捷的图片放大体验。这款插件不仅适用于常规的浏览器环境，而且具备良好的兼容性，能够应对各种不同的...
多种集合图片放大，多图放大镜，产品放大镜
04-04
它不仅支持单张图片的放大，还可以处理多张图片的切换，使得用户可以在不同的产品图片之间轻松切换，并在放大状态下查看。 该插件的核心功能包括： 1. **实时放大**：当鼠标移动到图片上时，会出现一个放大镜视窗...
JS图片放大镜
03-14
原生javascript图片放大镜，苏宁商城图片放大镜效果，放大
js实现图片轮番效果，原生代码
07-04
分析下，思想很简单。图片轮番：（需要用到的方法） 1：隔一段时间自动循环展示图片。||{setInterval(),} 2：当鼠标进入到图层区域时，图片停止轮番。||{clearInterval(),} 3：当鼠标移动到信息栏目时出现相对于的图片||}
Javascript实现图片的放大镜功能效果
06-17
以前写过一个jQuery的图片放大效果,但是存在着一些小问题,然后最近有时间重写了一遍,做了很详尽的改进.改进了大部分bug,而且不采用jQuery. 程序说明 主要为magnifier类,里面的主要方法有： init：运行方法 start：则是鼠标移入div的事件处理 move：则是鼠标在div中移动的事件处理 end：鼠标移出后的事件处理
ecshop 放大镜效果
11-07
3、将模板文件（goods.dwt）中的商品图部分（需要加放大镜效果的地方，改成这样的代码）代码更改为如下 $pictures.0.img_url}" id="zoom1" class="MagicZoom MagicThumb" title="{$goods.goods_style_name}"> $...
商城专用多张图片带放大效果
09-07
4. **交互元素**：可以是图片上的热点区域，或者一个单独的放大镜图标。用户通过点击或悬浮在这个元素上来触发放大效果。 5. **动画效果**：为了使用户体验更佳，放大过程通常会伴随平滑的过渡动画，这可以通过CSS3...
js实现图片的放大镜功能
han_han__的博客
09-13 1391
js实现图片的放大镜功能
js实现图片放大镜效果——简单方法
yehaocheng520的博客
07-31 7478
之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501 当时是在vue项目中使用的，其实跟在js中原理也是一样的。 实现图片放大镜效果的重点就是下面的这张图了： 上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就
common.js
weixin_33725270的博客
05-13 664
function my$(id) { return document.getElementById(id); } // 处理浏览器兼容性 // 获取第一个子元素 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node ...
js实现图片放大镜效果
weixin_46099013的博客
07-27 1328
js实现图片放大镜效果
vue图片放大镜
05-31
Vue图片放大镜可以通过以下步骤实现： 1. 在Vue组件中引入所需的CSS和JS文件，例如：jquery、magnify等； 2. 在Vue组件中定义需要放大的图片，例如： ```html <template> <div class="container"> <img src="./assets/img/product.jpg" alt="Product" class="product-img" id="product-img"> </div> </template> ``` 3. 在Vue组件的mounted()钩子函数中初始化放大镜功能，例如： ```javascript mounted() { $(document).ready(function() { $('#product-img').magnify({ speed: 200, src: './assets/img/product-large.jpg', onload: function() { console.log('Magnify Loaded'); } }); }); } ``` 在上述代码中，我们使用jQuery选择器选择了需要放大的图片，并使用magnify插件初始化放大镜功能。 4. 最后，在Vue组件的CSS样式中定义放大镜的样式，例如： ```css .product-img { width: 100%; max-width: 500px; cursor: zoom-in; } .magnify-lens { position: absolute; display: none; border: 1px solid #d4d4d4; background-color: #fff; opacity: .5; width: 100px; height: 100px; cursor: move; } .magnify-preview { position: absolute; overflow: hidden; display: none; z-index: 999; width: 400px; height: 400px; border: 1px solid #d4d4d4; background-color: #fff; opacity: .5; } ``` 在上述代码中，我们定义了放大镜镜片和预览框的样式，可以根据需求进行定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值