用JS实现放大镜特效

最新推荐文章于 2023-08-23 15:31:17 发布
最新推荐文章于 2023-08-23 15:31:17 发布
阅读量317 收藏 1
点赞数
分类专栏： 前端 文章标签： 用JS实现放大镜特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41297409/article/details/81842916
版权

具体实现代码如下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用JS实现放大镜特效</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    #demo {
        display: block;
        width: 400px;
        height: 255px;
        margin: 50px;
        position: relative;
        border: 1px solid #ccc;
    }
    #small-box {
        position: relative;
        z-index: 1;
    }
    #float-box {
        display: none;
        width: 160px;
        height: 120px;
        position: absolute;
        background: #ffffcc;
        border: 1px solid #ccc;
        filter: alpha(opacity=50);
        opacity: 0.5;
    }
    #mark {
        position: absolute;
        display: block;
        width: 400px;
        height: 255px;
        background-color: #fff;
        filter: alpha(opacity=0);
        opacity: 0;
        z-index: 10;
    }
    #big-box {
        display: none;
        position: absolute;
        top: 0;
        left: 460px;
        width: 400px;
        height: 300px;
        overflow: hidden;
        border: 1px solid #ccc;
        z-index: 1;;
    }
    #big-box img {
        position: absolute;
        z-index: 5;
    }
    </style>
    <script>
        window.onload = function () {
        var objDemo = document.getElementById("demo");
        var objSmallBox = document.getElementById("small-box");
        var objMark = document.getElementById("mark");
        var objFloatBox = document.getElementById("float-box");
        var objBigBox = document.getElementById("big-box");
        var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
        objMark.onmouseover = function () {
            objFloatBox.style.display = "block"
            objBigBox.style.display = "block"
            }
        objMark.onmouseout = function () {
            objFloatBox.style.display = "none"
            objBigBox.style.display = "none"
            }
        objMark.onmousemove = function (ev) {
        var _event = ev || window.event; 
        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
            if (left < 0) {
                left = 0;
            } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                left = objMark.offsetWidth - objFloatBox.offsetWidth;
            }
            if (top < 0) {
                top = 0;
            } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                top = objMark.offsetHeight - objFloatBox.offsetHeight;
            }
                objFloatBox.style.left = left + "px";   
                objFloatBox.style.top = top + "px";
                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
            }
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

 

qq_41297409
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现放大镜效果
qq_65325072的博客
03-15 6301
思路： 先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果 大概思路实现图： html + css 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t...
使用JavaScript实现放大镜效果（有详细注释）
chirrupy_YI的博客
06-15 2416
如何使用JavaScript实现放大镜效果
JavaScript网页特效——放大镜(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-27 3373
JavaScript网页特效——放大镜(1+X Web前端开发 例题)
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
Tang_jibin的博客
03-31 3992
JavaScript实现的放大镜效果
[完整]js实现放大镜效果
最新发布
qq_57676486的博客
08-23 294
源码：将图片换一下就可以使用了，需要注意的是盒子的大小都是固定的使用的固定值计算的鼠标位置，使用时更改中盒子大小时需要更改计算鼠标位置的x与y及遮罩层的mx及my。遮罩层移动的原理：将鼠标的位置获取之后通过控制鼠标移动，将其赋值给遮罩层 layer.style.top = my + 'px';实现：1.小盒子small当鼠标移入，将小img里src赋值给中等框src，将小盒子的src赋值给大盒子的背景2.大盒子的展示与隐藏,经过大盒子展示大盒子，离开大盒子隐藏大盒子
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生js简单实现放大镜特效
10-19
在网页设计中，为了提供更好的用户体验，经常需要实现一些交互效果，例如放大镜特效。这种特效主要用于产品展示，用户可以通过鼠标移动来查看商品的细节。本文将详细介绍如何使用原生JavaScript来实现一个简单的放大...
js实现放大镜特效
10-19
JavaScript 实现放大镜特效是一种常见的网页交互效果，它允许用户在鼠标悬停在小图上时看到放大的细节。这个效果通常用于电商网站的产品展示，让用户可以更清晰地查看商品的细节。以下是如何使用 JavaScript 和 CSS ...
JS实现放大镜效果
qq_36851919的博客
12-23 1656
首先放大镜的原理是通过移动前面小图片里面的小黑块的位置，然后移动后面大图片的位置。 那么可以先把要实现的效果列个步骤出来。 1.鼠标放到小盒子上面的小方格大图片框出来 2. 鼠标移出小盒子上面的小方格 大图片框消失 3.小方格随着鼠标移动 4.移动小方格大图片盒子的大图片随着移动 首先完成html还有css部分（偷了个懒，直接让大盒子和小方格的比例与大图片和小图片的比例一致，这样在后面计算大图片移动位...
JS实现局部放大(放大镜)效果
02-25
这是无意思遇到收集的，用JS做的对图片局部放大的效果 就像放大镜一样的效果
js实现局部放大镜效果
07-24
仿淘宝局部放大镜效果，可以点击图片来实现局部放大，是商城不错的选择
图片放大镜（有意思的JS 二）
Zhangguohao666的博客
02-21 1200
28800秒，给你带来超有意思的放大镜效果
H5+css+js的商品放大镜效果
tmoonlee的博客
06-12 1225
无
超详细原生js实现一个放大镜效果
梅花寺
11-02 612
以上就是实现一个放大镜的全部内容附上gitHub地址：欢迎来踩整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。 **图片移动的关键:** 移动的图片使用：绝对定位（注意子绝父相。
放大镜
promis_的博客
12-16 117
CSS样式： <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative;
JS实现放大镜特效
凭澜偏偏
07-24 2569
实现效果图 组成分析 1、外层DIV分成两个盒子，第一个盒子为中等大小的图片，第二个盒子就是放大特效展示的盒子 2，下面还有三个list 事件 1，鼠标== 停留于列表时，对应的中盒子中 img的src对应改变== 2，当鼠标停留于中盒子时，有一个黄色正方形跟着鼠标移动 ，并且在中图盒子中，鼠标停留时光标为移动 == 3、在大盒子中，与中盒子中的黄色方块的移动同步 。往 左 == 移动时，大盒子...
事件对象实现放大镜的特效
05-25
要实现放大镜的特效，可以使用事件对象来捕获鼠标在图片上的移动，并在放大镜区域显示放大后的图片。 具体实现步骤如下： 1. 在 HTML 中添加一个图片和一个放大镜区域（可以使用 div 元素），并设置它们的位置和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值