javaScript实现放大镜特效

2024-08-03 11:12:45

要实现的效果：鼠标放到小图片上小图片上方会出现一个小块，这个小块里面的区域会放大显示到右边大图里面（如下图所示）

这个效果主要用到的是：鼠标的坐标e.clientX，e.clientY,偏移量offsetLeft，offsetTop,offsetWidth,sffsetHeight等属性。

HTML和CSS代码：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#2c3e50;

        }
        .wrap{
            display: flex;
            position: relative;
            left: 200px;
            top: 30px;
        }
        .small{
            width: 500px;
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            left: 0px;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small span{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
            z-index: 1;
        }
        .big{
            display: none;
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 50px;
            top: 0;
        }
        .big img{
            position: absolute;
            left: 0;
            top: 0;
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="small">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div class="big">
            <img src="img/33.jpg" alt="">
        </div>
    </div>

</body>
</html>

JS部分：

鼠标移入放大镜（小图上的小块）显示，右边大图显示

//最大的容器
let wrap=document.querySelector('.wrap');
//小图部分
let smallWrap=document.querySelector('.wrap .small');
let smallImg=document.querySelector('.wrap .small img');
let smallBox=document.querySelector('.wrap .small span');
//大图部分
let bigBox=document.querySelector('.wrap .big');
let bigImg=document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
       smallBox.style.display="block";
       bigBox.style.display="block";
}

鼠标在小图上移动时放大镜跟随移动，用event对象的event.clientX,和event.clientY来获取鼠标的坐标。

通过event.clientX和event.clientY可以得到鼠标的位置，父容器的偏移量,发大镜的偏移量（实际项目中可能会给发大镜设置偏移量，为了去掉这个偏移量的影响要减去这个偏移量），放大镜效果中鼠标一直都在小块的中间位置，所以移动的位置就可以了这样去的。

smallWrap.onmousemove=function(e){
            let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

到这一步放大镜就会跟随鼠标移动了，还要加个范围限定，不然发大镜移动距离就会超过小图片了

范围限定

smallWrap.onmousemove=function(e){
            let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;

            //范围限定方法一
           /*  if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //范围限定方法二
            moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

       }

放大镜跟随鼠标移动实现之后，接下来就需要实现发大镜移动时，大图也跟着移动（大图移动的方向是相反的），发大镜移动的距离与大图移动的距离是成正比的，小图的宽度与大图片（包过未显示部分）的宽度也是成正比的，小图可以移动动的最大距离和大图可以动的最大距离也是成正比的，所以可以通过这二个公式求得大图应该移动多少。

放大镜移动的距离/小图的宽度=大图移动的距离/大图的宽度 这个公式虽然可以实现但是没有限定最大可移动距离会出现这种效果

所以这个公式里要这样写最好放大镜移动的距离/小图的宽度-放大镜的宽度（这是放大镜最大的移动范围）

放大镜移动的距离/（小图的宽度-放大镜的宽度）=大图移动的距离/（大图的宽度-大图显示区域）

注意大图移动的方向与放大镜移动的方向是相反的！

smallWrap.onmousemove=function(e){
            let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;

            //范围限定方法一
           /*  if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //范围限定方法二
            moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移动位置
            let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }

最后再加上鼠标移出事件，鼠标移出，放大镜和大图隐藏

smallWrap.onmouseout=function(){
            smallBox.style.display="none";
            bigBox.style.display="none";
       }

全部代码：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#2c3e50;

        }
        .wrap{
            display: flex;
            position: relative;
            left: 200px;
            top: 30px;
        }
        .small{
            width: 500px;
            height: 300px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            left: 100px;
        }
        .small img{
            width: 100%;
            height: 100%;
        }
        .small span{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
            z-index: 1;
        }
        .big{
            display: none;
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            left: 120px;
            top: 0;
        }
        .big img{
            position: absolute;
            left: 0;
            top: 0;
            width: 1000px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="small">
            <img src="img/33.jpg" alt="">
            <span></span>
        </div>
        <div class="big">
            <img src="img/33.jpg" alt="">
        </div>
    </div>
    <script>
        //最大的容器
       let wrap=document.querySelector('.wrap');
       //小图部分
       let smallWrap=document.querySelector('.wrap .small');
       let smallImg=document.querySelector('.wrap .small img');
       let smallBox=document.querySelector('.wrap .small span');
        //大图部分
       let bigBox=document.querySelector('.wrap .big');
       let bigImg=document.querySelector('.wrap .big img');
       smallWrap.onmouseover=function(){
            smallBox.style.display="block";
            bigBox.style.display="block";
       }
       smallWrap.onmousemove=function(e){
            let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
            let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;

            let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
            let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;

            //范围限定方法一
           /*  if(moveX<0){
                moveX=0;
            }else if(moveX>=maxX){
                moveX=maxX
            }
            if(moveY<0){
                moveY=0;
            }else if(moveY>=maxY){
                moveY=maxY
            } */
             //范围限定方法二
            moveX=Math.min(maxX,Math.max(0,moveX))
            moveY=Math.min(maxY,Math.max(0,moveY))

            smallBox.style.left=moveX+'px'
            smallBox.style.top=moveY+'px'

            let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移动位置
            let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);

            bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
            bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
       }
       smallWrap.onmouseout=function(){
            smallBox.style.display="none";
            bigBox.style.display="none";
       }
    </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实现放大镜效果

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

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

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

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

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

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

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

本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px;
javaScript实现放大镜特效

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

本文实例为大家分享了js放大镜特效的实现代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
原生JS实现的放大镜特效示例【测试可用】

本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">
JavaScript+CSS相册特效实例代码

嗯就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT
基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54 320X320 800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c
Javascript 实现放大镜效果实例详解

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

本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下普及知识:放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距 offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLeft 内容滚动的左边距
javascript 广告移动特效的实现代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box2{} .box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;

javaScript实现放大镜特效

相关推荐

随机推荐