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. 关于for循环里面异步操作的问题

    首先来看一个比较简单的问题,我们想实现的就是每隔1s输出0-4的值,就是这么简单,看下错误写法: function test() { for (var i = 0; i < 5; ++i) { ...

  2. 让站点支持MarkDown语法~(转)

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  3. Golang 通用连接池库 Golang-Pool

    Golang 实现的连接池 功能: * 连接池中连接类型为interface{},使得更加通用 * 链接的最大空闲时间,超时的链接将关闭丢弃,可避免空闲时链接自动失效问题 * 使用channel处理池 ...

  4. BZOJ_2661_[BeiJing wc2012]连连看_费用流

    BZOJ_2661_[BeiJing wc2012]连连看_费用流 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规 ...

  5. 【Unity游戏开发】AssetBundle杂记--AssetBundle的二三事

    一.简介 马三在公司大部分时间做的都是游戏业务逻辑和编辑器工具等相关工作,因此对Unity AssetBundle这块的知识点并不是很熟悉,自己也是有打算想了解并熟悉一下AssetBundle,掌握一 ...

  6. CSRF攻击【转载】

     CSRF(cross-site request forgery )跨站请求伪造,攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,通 ...

  7. asp.net core系列 61 Ocelot 构建服务发现简单示例

    一.概述 Ocelot允许指定服务发现提供程序,如Consul或Eureka. 这二个中间件是用来实现:服务治理或秒服务发现,服务发现查找Ocelot正在转发请求的下游服务的主机和端口.目前Ocelo ...

  8. 带你由浅入深探索webpack4（二）

    在前一篇文章已经介绍了webpack4从入门到一些核心常用的用法,大家可以从上一篇文章看起.带你由浅入深探索webpack4(一) 接着上一章,接下来我们会继续探讨webpack4中的各种实用用法,让 ...

  9. 《k8s 源码分析》- Custom Controller 之 Informer

    Custom Controller 之 Informer 概述 架构概览 reflector - List & Watch API Server Reflector 对象 ListAndWat ...

  10. Windows环境下消息中间件RabbitMq的搭建与应用

    前言 消息中间件目前已经在很多大型的项目上得到了运用,我们常见的有 RabbitMq, activitymq,kafka,rocketmq,其中rocketmq是阿里自己在kafka的基础上用java ...