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. 使用box-shadow进行画图(性能优化终结者)

    最近突然想做一些好玩的东西,找来找去,想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来感觉这个挺有意思,正好趁着周末,自己也搞一波 前言 在线地址: 优化前的版本优化后的版本源 ...

  2. 这样入门asp.net core 之 静态文件

    本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务 首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...

  3. 下载恒星源码使用vs2015运行配置

    需要安装PostgreSQL 配置安装路径下的include 项目 右键→属性 在启动项目项目中配置 右键→属性→展开连接器→输入

  4. SQL2008全部数据导出导入两种方法

    方法一:生成脚本导出导入sql2008全部数据第一步,右键要导出的数据库,任务--生成脚本 第二步,在设置脚本编写选项处,点击--高级(A),选择要编写脚本的数据的类型为:架构和数据 如果找不到 要编 ...

  5. BinaryOperator<T>接口的用法示例+BiFunction

    转自http://www.tpyyes.com/a/java/2017/1015/285.html 转自https://blog.csdn.net/u014331288/article/details ...

  6. 集合-Table

    当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava提供了一个新 ...

  7. mysql binlog格式

    Binlog Event 对于一个 Binlog Event 来说,它分为三个部分,header,post-header 以及 payload.MySQL 的 Binlog Event 有很多版本,我 ...

  8. 拿Proxy可以做哪些有意思的事儿

    Proxy是什么 首先,我们要清楚,Proxy是什么意思,这个单词翻译过来,就是 代理.可以理解为,有一个很火的明星,开通了一个微博账号,这个账号非常活跃,回复粉丝.到处点赞之类的,但可能并不是真的由 ...

  9. golang 中 string 转换 []byte 的一道笔试题

    背景 去面试的时候遇到一道和 string 相关的题目,记录一下用到的知识点.题目如下: s:="123" ps:=&s b:=[]byte(s) pb:=&b s ...

  10. 用Fundebug插件记录网络请求异常

    在服务端,不管我们使用Node.js.Java.PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息.这个对于后端做事后分析是很有用的. 另一方面,前端有时候出问题其实是因为后端接口 ...