JavaScript实现放大镜效果

2024-10-03 11:31:32

本文实例为大家分享了JavaScript实现放大镜效果的具体代码，供大家参考，具体内容如下

这次实现的效果如下：

这次的案例稍微有一点难度，在css和js上都需要多加思考，话不多说，让我们来开始吧~

1、首先我们需要使用html和css规划好整体的布局，即两个相邻的盒子A和B，左边的盒子A中还有一个小盒子S。为了实现相邻，我采用的方法是为其均设置position:absolute ，然后设置left和top的值来使其相邻。
小盒子S我们同样可以为其设置position:absolute，调整一下背景颜色即可。

2、然后我们需要使用js来设置动画效果，即：鼠标放在盒子A上时，小盒子S的位置会随着鼠标的移动发生移动，同时盒子B中的图像会成为盒子S覆盖图像的放大版。如何实现呢？

3、首先实现小盒子S的位置变化：调用盒子A的onmousemove函数，传入参数client，表示时间鼠标在盒子A上移动。我们通过client获取鼠标的位置(clientX，clientY)，然后通过(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可获得鼠标在图像上的相对坐标，通过此值减去盒子S的宽度、高度的一半即可获得盒子S在A中的位置。
但是要注意，记得为盒子S设置边界，当横坐标为0或为A盒子宽度、纵坐标为0或者A盒子高度时，要使其坐标固定。

4、接着实现盒子B中的图像会成为盒子S覆盖图像的放大版：我们首先来思考一个问题，这个放大效果如何才能实现呢？从我的实现角度出发，对于盒子B来说，它首先需要一个背景图==盒子A中的图像，然后将其放大某个倍数x，当盒子S移动时，改变B的background-position为y，达到放大+移动的效果。

5、最后一点，x和y的值是多少呢？（假定S、A、B均为等比例） x：将盒子B放大的倍数应该等同于A的大小除以S的大小，这样能达到相同的图像范围。y：B移动时的距离变化应该示盒子S移动的距离*（盒子B的大小除以S的大小）。可以多加思考~

可能我的实现方法过程比较复杂，大家如果想到更好的方法可以留言呀

代码如下：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            left: 180px;
            top: 100px;
        }

        #box img {
            width: 400px;
            height: 300px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            vertical-align: bottom;
        }

        #nav {
            width: 480px;
            height: 360px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            position: absolute;
            left: 582px;
            top: 100px;
            background-image: url(../img/morn.jpg);
            background-repeat: no-repeat;
            background-size: 250% 250%
        }

        #small {
            width: 160px;
            height: 120px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="small"></div>
        <img src="../img/morn.jpg" alt="">
    </div>
    <div id="nav"></div>
    <script>
        let box = document.getElementById("box");
        let small = document.getElementById("small");
        let nav = document.getElementById("nav");

        box.onmousemove = function (client) {
            let x = client.clientX - box.offsetLeft;
            let y = client.clientY - box.offsetTop;
            small.style.left = x - 80 + 'px';
            small.style.top = y - 60 + 'px';
            let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
            let dis_y = box.offsetTop + box.offsetHeight - client.clientY;

            nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
            nav.style.backgroundPositionY = (60 - y) * 3 + 'px';

            if (x - 80 < 0) {
                small.style.left = 0;
                nav.style.backgroundPositionX = 0;
            }
            if (dis_x <= 80) {
                small.style.left = box.offsetWidth - 160 + 'px';
                nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
            }
            if (y - 60 < 0) {
                small.style.top = 0;
                nav.style.backgroundPositionY = 0;
            }
            if (dis_y < 60) {
                small.style.top = box.offsetHeight - 120 + 'px';
                nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
            }

            small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";

        }

        box.onmouseout = function () {
            small.style.backgroundColor="transparent"
        }

    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现放大镜详细

目录 1.效果图 2.实现原理 3.总结 1.效果图 2.实现原理借助宽高等比例放大的两张图片,结合js中鼠标偏移量.元素偏移量.元素自身宽高等属性完成:左侧遮罩移动Xpx,右侧大图移动X*倍数px:其余部分就是用小学数学算一下就OK了. HTML和CSS: <divclass="wrap">  <div id="small"> <img src="img/1.jpg" al
javaScript实现放大镜特效

要实现的效果:鼠标放到小图片上小图片上方会出现一个小块,这个小块里面的区域会放大显示到右边大图里面(如下图所示) 这个效果主要用到的是:鼠标的坐标e.clientX,e.clientY,偏移量offsetLeft,offsetTop,offsetWidth,sffsetHeight等属性. HTML和CSS代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
JavaScript仿京东放大镜效果

本文实例为大家分享了JavaScript实现京东放大镜效果的具体代码,供大家参考,具体内容如下案例分析整个案例可以分为三个功能模块鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 鼠标经过小图片盒子, 黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能就是显示与隐藏移动黄色遮挡层,大图片跟随移动功能,大图片的移动距离要跟黄色遮挡层的比例相等. 求大图片的移动距离公式代码 <!DOCTYP
JavaScript仿淘宝放大镜效果

本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o
JavaScript面向对象实现放大镜案例

本文实例为大家分享了JavaScript面向对象实现放大镜的具体代码,供大家参考,具体内容如下效果图实现原理分析如图所示触发鼠标的移动事件时,根据事件对象的 clientX 和 clientY 属性得到实时的坐标点 x 和 y 值 ,减去 small_box 的 offsetLeft 值和 cutting_box 的宽度的一半 ,可以得到 cutting_box 的偏移量 left 值,top值同理.当 cutting_box 到达右侧和下侧时,left 和 top 取得最大值.用实
JavaScript仿京东放大镜特效

本文实例为大家分享了JavaScript仿京东放大镜的具体代码,供大家参考,具体内容如下功能需求: 1.分为三个模块 2.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能 3.黄色的遮挡层跟随着鼠标移动 4.移动黄色遮挡层,大图片跟随着移动大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { position: relative; w
Javascript实例项目放大镜特效的实现流程

目录前言案例:仿京东放大镜效果 offset系列 client系列 scroll系列三大系列总结前言本票博客主要是放大镜案例,里面涉及到的知识点会提出来,可放心食用~后有源代码. 案例:仿京东放大镜效果效果见下图: 功能要求: 当鼠标移动到小图片上时,遮罩层出现,同时旁边大图片也出现,鼠标移出,遮罩层消失,大图片也消失. 遮罩层只能在小盒内子移动,不能超出. 遮罩层在小盒子内移动,大图片显示对应的板块. 案例分析: 元素的隐层和显示遮罩层的移动范围用offset计算计算出大盒子内
js实现放大镜效果的思路与代码

本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下样式展示: 思路先准备两张图片,一张小图,一张大图,并且两张图片有一个整数比值在小图片的上方设置一个放大镜样式,背景设为透明色即可大图片外边套一个父元素,超出父元素隐藏,大小为只能容纳你的放大部分即可父元素与放大镜样式的比值=大图与小图的比值在小图片上进行鼠标移动时获取鼠标的坐标,得到鼠标当前处于小图片上的坐标根据对应的比例求出大图片的坐标并移动大图片令放大部分处于父元素可见范围代码 1.html部分 <d
Javascript 实现放大镜效果实例详解

Javascript 实现放大镜效果今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的放大镜效果效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个很好的思路就是,展示区是一小块可视区域,给他一个图片,超出可视区域的部分设为隐藏,有了这个思路,这个效果就能够很好的实现了,先看一下HTML结构! <div id="pic_wrap"> <div id="floa
JavaScript实现放大镜效果代码示例

JavaScript实现放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
JavaScript实现放大镜效果

本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~ 1.首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S.为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置left和top的值来使其相邻. 小盒子S我们同样可以为其设置position:absolute,调整一下
HTML+CSS+JavaScript实现放大镜效果

本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下效果演示 JS 详解 HTML 和 CSS 部分放在了文章最后的源代码中,这里只对 JS 部分进行详解! 首先,需要获取操作的对象: 图片展示框(鼠标移入事件) 放大镜(显示和跟随鼠标) 放大镜中的图片(改变位置) let imgShow = document.querySelector('.img-show'); // 图片展示框 let imgLarge = document.qu
JavaScript图像放大镜效果实现方法详解

1. 基本四瓣花型图案根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML文件. <!DOCTYPE html> <head> <title>基本的四瓣花型图案</title> <script type="text/javascript"> function draw(id) { var canvas
用javascript实现放大镜效果

我们经常在一些详情页上可以见到放大镜效果,今天我们也来做一个放大镜样式. 先来看一下效果: 图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例这个案例可以分为三个功能模块 1.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能2.黄色的遮挡层跟随鼠标功能.3.移动黄色遮挡层,大图片跟随移动功能. 这是我们的html主体部分: <div class="product_intro clearfix"> <!
使用纯javascript实现放大镜效果

jd或者淘宝的具体商品有个放大镜的效果.虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let'go: 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧: 最终实现效果: html 代码: 复制代码代码如下: <div id="Magnifier"></div> css 代码: 复制代码代码如下: <style> * { mar
JavaScript图片放大镜效果代码[代码比较简单]

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
尝试动手制作javascript放大镜效果

本文实例为大家介绍了基于javascript实现放大镜效果的原理和代码,分享给大家供大家参考,具体内容如下: 原理: A:放大镜 B:小图片 C:大图片可视区域 D:大图片鼠标的位置应该在放大镜的中央,所以鼠标位置为: clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth; clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight; 鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的
javascript放大镜效果的简单实现

这个效果并不难,要点是位置和比例设置, 捕获鼠标位置.判断鼠标位置区域.还有onmouseover事件.onmousemove事件.onmouseout事件设置显示大图的比例,小图上显示的切图比例都要弄准确点,最好是2倍啦,4倍啦. 主要注意宽度,我这里的图片m.jpg是1440X900的.... 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.

JavaScript实现放大镜效果

相关推荐

随机推荐