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. 超实用的JavaScript代码段 Item5 --图片滑动效果实现

    先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...

  2. box-shadow 详解及示例

    box-shadow  [bɑks] - [ˈʃædoʊ]   英文示意: box:盒,包厢 shadow:阴影,渐变   定义: box-shadow: none | <shadow> ...

  3. 错误：编码GBK的不可映射字符

    当Java源代码中包含中文字符时,我们在用javac编译时会出现"错误:编码GBK的不可映射字符". 由于JDK是国际版的,我们在用javac编译时,编译程序首先会获得我们操作系统 ...

  4. IntelliJ IDEA 配置maven

    以下内容引自http://blog.csdn.net/qq_32588349/article/details/51461182. 使用IntelliJ IDEA 配置Maven(入门)         ...

  5. docker开机自动重启参数

    docker run -ti -d --privileged --restart=always -p : -p : -v /apps/qkaoauth:/apps/qkaoauth docker.qk ...

  6. 夏娜的菠萝包 JDFZ1098

    Description 问题描述:夏娜很喜欢吃菠萝包,她的经纪人RC每半个月就要为她安排接下来的菠萝包计划.今天是7月份,RC又要去商场进货买菠萝包了.这次RC总共买了N种菠萝包,每种一个.每个菠萝包 ...

  7. java集合框架之Collections

    参考http://how2j.cn/k/collection/collection-collections/369.html Collections是一个类,容器的工具类,就如同Arrays是数组的工 ...

  8. Filter中排除对指定URL的过滤

    1. 我们可以在web.xml中配置filter来对指定的URL进行过滤,进行一些特殊操作如权限验证等. <!– session过滤filter –> <filter> < ...

  9. Django-ORM增删改查

    ORM对单表进行增删改查 一,增加记录 #第一种方式 b=Book(name="Linux",price=66,author="kelvin",pub_date ...

  10. 浅析 .Net Core中Json配置的自动更新

    Pre 很早在看 Jesse 的Asp.net Core快速入门的课程的时候就了解到了在Asp .net core中,如果添加的Json配置被更改了,是支持自动重载配置的,作为一名有着严重" ...