放大镜小案例

最新推荐文章于 2022-03-27 15:16:45 发布
最新推荐文章于 2022-03-27 15:16:45 发布
阅读量304 收藏
点赞数
文章标签： 原生 js 放大镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41601299/article/details/86760416
版权

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #move {
            float: left;
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        #shadow {
            height: 40px;
            width: 60px;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(200, 200, 200, 0.5);
            cursor: pointer;
        }

        .container {
            width: 600px;
            height: 400px;
            float: left;
            overflow: hidden;
            position: relative;
        }

        #big {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<div id="move">
    <img id="small" width="300" height="200" src="mouse.jpg">

    <div id="shadow"></div>
</div>
<div class="container">
    <img id="big" width="3000" height="2000" src="mouse.jpg">
</div>
<script src="iwenEvent.js"></script>
<script>
    iwenEvent.event.on('move', 'mousemove', function (e) {
        var e = iwenEvent.event.getEvent(e)
        var x = e.clientX - 30;
        var y = e.clientY - 20;
        if (x < 0) {
            x = 0;
        } else if (x > 240) {
            x = 240;
        }
        if (y < 0) {
            y = 0;
        } else if (y > 160) {
            y = 160;
        }
        iwenEvent.dom.css("big","display","block");
        iwenEvent.dom.css('shadow', 'left', x + 'px');
        iwenEvent.dom.css('shadow', 'top', y + 'px');
        iwenEvent.dom.css('big', 'left', -x * 10 + 'px');
        iwenEvent.dom.css('big', 'top', -y * 10 + 'px');
    })
    iwenEvent.event.on("move","mouseout",function(e){
        iwenEvent.dom.css("big","display","none");
    })
</script>
</body>
</html>
csdn-Allen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现放大镜案例
01-18
本文实例为大家分享了jQuery实现放大镜效果的具体代码，供大家参考，具体内容如下 动画： 1、鼠标移入显示区图片时，显示选择框； 2、放大镜特效，将图片位于选择框内的部分放大显示； 3、点击下方小图片和左右移动...
使用js实现放大镜效果案例
03-27
具体图片模块展示：例如商品图片鼠标放置展示更大的效果图 适用于购物网站或作品图展示的初级网站效果插入
放大镜案例（html/css/js）
weixin_52120405的博客
03-27 151
实例效果为淘宝、京东等购买物品查看图片细节效果 HTML <body> <div class="zoom"> <!-- 小图 --> <div class="small-img"> <img src="images/small01.jpg" alt="small-img"> <div class="ball"></div> <div class="mask"
放大镜案例
小白小白从不日别的博客
04-18 89
原理： 该案例主要利用的就是鼠标事件来实现的，主要用到onmousemove和onmouseleave，如果对于这两个事件不明白的可以看看我总结的相关方法：事件处理（二） 其次需要注意的是一是边界值问题，二是要明白鼠标移动的方向与所要放大的区域所移动的方向是相反的 最后代码如下： <div class="small"> <div class="fangdajing"></div> </div> <div class=
jquery写的两种放大镜小案例
webEmmet
11-05 3597
很多同学在学习之初，都会用到放大镜的效果，这里用jquery写了两种放大镜效果，希望对学习的同学有所帮助。
放大镜实例
weixin_45932157的博客
02-03 194
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>放大镜案例</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 430px; height: 430px; border: 1px solid
html图片放大镜案例,js图片放大镜实例讲解(必看篇)
weixin_32191249的博客
06-05 693
1、图片放大镜的思路：当打开页面时只有图片首先，说一下基本效果和调理，图片放大镜，也就是当你鼠标移入当前的商品图片时，会出现一个小灰色的观察移动框，有点会出现一个对应部位的放大的图片。然后当鼠标移动时，右边的放大镜会出现对应部位的放大图片最后当鼠标移开后，小的观察框和放大的图片都会消失。2、有了基本思路就看代码#small{width: 300px;height: 300px;border: 1p...
html.rar_html放大镜案例
09-21
html实现的放大镜例子，效果还不错，分享。
JavaScript实现放大镜效果代码示例
10-15
JavaScript实现的放大镜效果是一种常见的网页交互功能，它允许用户在鼠标悬停在小图上时，通过一个浮动的放大窗口预览图像的细节。这种效果常见于电子商务网站的产品图片展示，增强了用户体验，使得用户无需点击就能...
js仿京东放大镜效果
10-14
在本文中，我们将深入探讨如何使用JavaScript实现一个类似于京东商品展示中的放大镜效果。这种效果允许用户在浏览商品图片时，通过鼠标悬停在图片上看到一个放大的部分，从而提供更清晰的细节视图。下面我们将逐步...
图片放大镜效果示例
07-15
图片放大镜效果示例，封装了js，可以很方便的调整，直接浏览器打开可看到效果，再根据自己的需求做相应调整。
Html+Css+Js实现放大镜功能（完整代码+详解）
热门推荐
qq_38170526的博客
08-01 1万+
一，问题描诉 通过将鼠标指向指定的图片，将鼠标移动到图片时，显示一个透明的小区域，然后将小区域的部分放大，查看细节。放大过程中必须满足几个条件： 1.鼠标移动时，透明的小区域也跟着移动，并且透明的小区域必须在指定的图片内，不得出该图片的范围。 2.放大的区域要按照一定的比例展示出来 二，难点分析 2.1难点列出 1.鼠标在图片区域时，透明小区域出现，放大的区域出现 2.鼠标移出图片时，透明小区域小...
网站的放大镜实例
Mrlonely思考笔记
08-21 305
本文介绍一下电商网站用的比较多的案例,放大镜案例,先来看看效果吧. 需求分析: 当鼠标移入进小盒子的时候即左边的盒子,显示出遮罩层还有大盒子,大盒子会出现遮罩层遮挡的部分,达成一个放大的效果 当鼠标在小盒子里移动时,大盒子里显示的图片对应的会跟着改变. 那我们该如何实现这个效果呢? 其实呢,这个案例就是对js事件,还有一些offset家族还有事件对象的三大坐标系(screen,clien...
放大镜小案例_JavaScript
lemon_宁萌
09-22 312
放大镜案例 body{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; position: relative; float:
放大镜小例子
Vivian_shuang的博客
07-13 410
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> #section { width: 1400px; height: 600px; position: relative; float: left; border: 1px solid
html中放大镜案列,HTML放大镜的一种实现及原理讲解（js）
weixin_36299472的博客
06-15 845
0.效果预览预览.png上下方的宽度和高度指的是图片内可移动滑块的长宽，下文以‘放大镜’来称呼该滑块。基本功能移动放大镜来选择需要放大的区域。可以根据需求调整放大镜尺寸和倍数，默认放大镜尺寸为50px*50px，放大倍数为2倍。上下滑动鼠标滚轮来放大(缩小)放大镜尺寸。下方实时显示放大镜当前尺寸和放大倍数。eg: 调整放大镜大小来显示一行英文image.png1.原理讲解HTML部分Setting...
事件对象+放大镜案例
weixin_43768585的博客
12-13 182
一、事件对象： 只要触发了某一个事件，就会产生一个相应的事件对象，这个event对象中包含着与这一事件相关的信息，所以通过事件对象就可获取任意相关事件的属性。 考虑到兼容问题，通常这样写(以onclick事件为例)： event.onclick=function(event){//当点击事件产生时，event就会被接受 var event=event || window.event;//解决...
用js写一个放大镜的案例
最新发布
09-24
### 回答1： 下面是一个使用 JavaScript 实现放大镜效果的示例： HTML代码： ``` <div id="container"> <img src="image.jpg" id="image"> <div id="magnifying-glass"></div> </div> ``` CSS代码： ``` #container { position: relative; width: 500px; height: 400px; } #image { width: 100%; height: 100%; } #magnifying-glass { width: 100px; height: 100px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; display: none; } ``` JavaScript代码： ``` const container = document.getElementById("container"); const image = document.getElementById("image"); const magnifyingGlass = document.getElementById("magnifying-glass"); container.addEventListener("mousemove", function(event) { magnifyingGlass.style.display = "block"; magnifyingGlass.style.left = event.pageX - 50 + "px"; magnifyingGlass.style.top = event.pageY - 50 + "px"; let x = event.layerX; let y = event.layerY; magnifyingGlass.style.backgroundPosition = `-${x * 2}px -${y * 2}px`; }); container.addEventListener("mouseout", function() { magnifyingGlass.style.display = "none"; }); ``` 上面的代码实现了一个简单的放大镜效果。 ### 回答2： 放大镜是一种常见的网页交互效果，可以让用户在鼠标悬停或点击某个元素上时，通过放大显示该元素的细节和细微的部分。下面是一个用JavaScript编写的简单放大镜案例： 首先，需要在HTML中创建一个放大镜容器和一个被放大的图像容器。放大镜容器是一个div元素，通过设置其样式来控制放大镜的尺寸和位置。被放大的图像容器可以是一个img元素，通过设置其src属性来加载需要被放大的图片。 然后，通过JavaScript获取放大镜容器和被放大的图像容器的引用，并添加鼠标事件监听器。在鼠标移动事件中，通过获取鼠标相对于被放大图像容器的位置，来计算放大镜显示的位置。 在事件处理程序中，可以根据鼠标在被放大图像容器中的位置，计算出放大镜显示的位置。可以通过修改放大镜容器的背景图片以及位置来显示放大图像。同时，设置放大镜容器的尺寸为被放大图像容器的一定倍数，可以实现放大镜效果。 最后，为了让放大镜随着鼠标的移动而移动，需要在文档的mousemove事件中更新放大镜容器的位置。 这是一个简单的用JavaScript实现的放大镜案例。还可以根据具体需求进行改进和优化，如添加特效、放大镜形状等。 ### 回答3： 放大镜是一种常见的网站功能，它允许用户在浏览图片时能够放大并查看细节。以下是一个使用JavaScript实现的简单放大镜案例。 首先，在HTML中创建一个包含放大镜功能的元素。该元素包含两张图片，一张是原始图片，另一张是放大的图片。通过CSS将放大的图片的位置设为绝对，并将其初始大小设为原始图片的2倍。 ```html <div class="magnifier"> <img id="original-image" src="original.jpg" alt="原始图片"> <div id="magnified-image" style="background-image: url('magnified.jpg');"></div> </div> ``` 然后，使用JavaScript来实现放大镜功能。首先，获取原始图片和放大镜元素。 ```javascript var originalImage = document.getElementById('original-image'); var magnifier = document.querySelector('.magnifier'); ``` 然后，给原始图片添加鼠标移动事件监听器，以便在移动鼠标时更新放大镜的位置和放大的图片。 ```javascript originalImage.addEventListener('mousemove', function(event) { var originalImageRect = originalImage.getBoundingClientRect(); var offsetX = event.clientX - originalImageRect.left; var offsetY = event.clientY - originalImageRect.top; var magnifierSize = magnifier.offsetWidth / 2; var magnifierX = offsetX - magnifierSize; var magnifierY = offsetY - magnifierSize; magnifier.style.left = magnifierX + 'px'; magnifier.style.top = magnifierY + 'px'; var magnifiedImage = document.getElementById('magnified-image'); magnifiedImage.style.backgroundPosition = -magnifierX + 'px ' + -magnifierY + 'px'; }); ``` 最后，使用CSS将放大镜元素进行样式设置。 ```css .magnifier { position: relative; } .magnifier img { display: block; width: 100%; height: auto; } .magnifier div { position: absolute; width: 200px; height: 200px; border: 1px solid #000; background-size: cover; pointer-events: none; opacity: 0.7; } ``` 通过以上代码实现了基本的放大镜功能。当鼠标在原始图片上移动时，放大镜会根据鼠标位置更新自身的位置，并通过改变放大的图片的背景位置来实现放大效果。可以通过修改CSS样式和JavaScript代码来进一步定制和优化这个放大镜的案例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值