JS实现放大镜效果

首先我们先设想一下放大镜效果

1、当鼠标进入小盒子的时候，把大图片显示出来

2、当指定移动区域的时候，显示当前放大区域（放大效果）

3、鼠标移除我们让它消失

一、实现页面布局HTML+CSS

二、实现放大镜的功能js

下面来看代码，让你思路变清晰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>放大镜</title>
        <style>
            #box{
                width:  350px;
                height: 350px;
                margin: 100px 0 0 100px;
                position: relative;
            }   
            #small_box{
                width:100%;
                height: 100%;
                border:1px solid #ccc;
                position: relative;
            }       
            #mask{
                height: 100px;
                width: 100px;

                left: 0px;
                top: 0px;
                position: absolute;
                display: none;
                cursor: move;
            }   
            #big_box{
                height: 600px;
                width: 600px;
                border: 1px solid #ccc;
                overflow: hidden;
                top:0px;
                left: 360px;
                position: absolute;
                display: none;
            }       
        </style>
    </head>
    <body>
        <div id="box">
            <div id="small_box">
                <img src="img/pic01.jpg" />
                <span id="mask"></span>
            </div>
            <div id="big_box">
                <img src="img/pic001.jpg" style="position: absolute;"/>
            </div>
        </div>

        <script>
            window.onload = function(){
                //1.获取需要的元素
                var box = document.getElementById("box");
                var small_box = document.getElementById("small_box");
                var big_box = document.getElementById("big_box");
                var mask = document.getElementById("mask");
                var big_img = big_box.children[0];

                //2.鼠标移入小盒子事件
                small_box.onmouseover = function(){
                    //2.1鼠标移入，显示放大镜和大图片
                    big_box.style.display = 'block';
                    mask.style.display = 'block';

                    //2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件
                    small_box.onmousemove = function(event){
                        // //获取鼠标的坐标点X  Y
                        var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5;
                        var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5;

                        //做边界的校验
                        if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0，目的是让它不出去
                            pointX = 0;
                        }else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于（小盒子事件源宽度-指针区域事件源的宽度）时，我们就让它等于那个宽度，防止不出界。
                            pointX = small_box.offsetWidth-mask.offsetWidth;
                        }

                        if(pointY<0){
                            pointY = 0;
                        }else if(pointY>small_box.offsetHeight-mask.offsetHeight){
                            pointY = small_box.offsetHeight-mask.offsetHeight;
                        }

                        //移动mask
                        mask.style.left = pointX + 'px';
                        mask.style.top = pointY + 'px';

                        //移动大图
                        //小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度
                        //大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);
                        big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';
                    }
                }

    //3.鼠标移除小盒子事件
    small_box.onmouseout = function(){
    //2.1鼠标移入，显示放大镜和大图片
    big_box.style.display = 'none';
    mask.style.display = 'none';
    }
    }
    </script>
    </body>
</html>
​

注意

移动大图

小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);

big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
                        big_img.style.top = -       pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';

里面的减号指的是方向，方向为反方向，这样才能可以实现你所预想的结果，你可以试一下没有减号的效果你就知道是什么样的了

其它不懂的地方欢迎留言

 

javascript放大镜效果的更多相关文章

  1. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  2. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  6. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. JavaScript图形实例：图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. javascript html 鼠标放大镜效果

    1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示:   <!DOCTYPE html> < ...

随机推荐

  1. jmeter使用csv进行参数化（一）

    先录制一个脚本,具体录制可以参考笔者的随笔:http://www.cnblogs.com/wuyazi/p/8889770.html 1.准备参数化文本内容:mac没有自带的txt文本编辑器,笔者是在 ...

  2. 你不知道的JavaScript--Item2 浮点数精度

    理解JavaScript的浮点数 大多数编程语言都有几种数值型数据类型,但是JavaScript却只有一种.你可以使用typeof 运算符查看数字的类型.不管是整数还是浮点数,JavaScript都将 ...

  3. ubuntu16.04如何安装搜狗输入法

    1 . 首先我们需要先来下载支持linux版本的搜狗输入法安装包,这里我们先查看下自己的ubuntu系统是什么版本的,这里我们可以在右上角的那个齿轮图标点击查看"系统设置",在里面 ...

  4. 时序数据库InfluxDB使用详解

    1 安装配置 这里说一下使用docker容器运行influxdb的步骤,物理机安装请参照官方文档.拉取镜像文件后运行即可,当前最新版本是1.3.5.启动容器时设置挂载的数据目录和开放端口.Influx ...

  5. loj6271「长乐集训 2017 Day10」生成树求和 加强版

    又是一个矩阵树套多项式的好题. 这里我们可以对每一位单独做矩阵树,但是矩阵树求的是边权积的和,而这里我们是要求加法,于是我们i将加法转化为多项式的乘法,其实这里相当于一个生成函数?之后如果我们暴力做的 ...

  6. 如何查找元素对应事件的js代码，检测定位js事件

    比如一张图片当鼠标放到上面时,图片改变.想找到这个事件对应的js代码,假设另存为html之后,文件夹中有.js文件. 如果你会调试,可以用打开浏览器的调试功能,以chrome为例,按F12打开调试窗口 ...

  7. Spark学习之在集群上运行Spark

    一.简介 Spark 的一大好处就是可以通过增加机器数量并使用集群模式运行,来扩展程序的计算能力.好在编写用于在集群上并行执行的 Spark 应用所使用的 API 跟本地单机模式下的完全一样.也就是说 ...

  8. 从壹开始前后端分离【 .NETCore2.1 +Vue 2 +AOP+DI】框架之一 || 前言

    缘起 作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...

  9. Java核心技术梳理-集合

    一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具 ...

  10. ReactJs 的各个版本生命周期、API变化 汇总（一、V16.0.0）

    目录 一.React 各个版本之间的纵向对比 二.React 的基础 1.Components and Props 三.React V 16.0.0 1. The Component Lifecycl ...