效果：

1、  鼠标放上去会有半透明遮罩、右边会有大图片局部图

2、  鼠标移动时右边的大图片也会局部移动

放大镜的关键原理：

鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；

放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；

页面元素：

技术点：事件捕获，定位

难点：计算

需要元素：小图片和大图片，存放小图片和大图片的容器，有一个放大镜；

涉及到的技术点：

（1）       鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）

（2）       offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY

  • offsetLeft子元素相对于父元素的左位移
  • offsetWidth，offsetHeight一个元素的宽度和高度，宽度和高度是不包括滚动条的。

event.clientX、event.clientY鼠标的X轴和Y轴，相对于整个页面的坐标，而不是子元素

  • offsetLeft和style.left对比：

（1）、style.left返回的是字符串，如30px、offsetLeft返回的是数值30；

（2）、style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left；

（3）、style.left的值需要事先定义，否则取到的值为空。

style.left只针对在HTML中写的值有效，样式表中无法定义style.left;

制作放大镜所需要的计算

》重点：如何让小图片上的放大镜和大图片同步移动

关键：小图片的比例和大图片的比例是一样的，放大镜比例和右侧大的容器比例是一样的；他们之间的比例是相同的

移动时的比例计算：

放大镜核心计算公式：

编码步骤：

var objDemo=document.getElementById("demo");

var objSmallBox=document.getElementById("small-box");

var objMarkBox=document.getElementById("mark");

var objFloatBox=document.getElementById("float-box");

var objBigBox=document.getElementById("big-box");

var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

objSmallBox.onmouseover=function(){

    objFloatBox.style.display="block";

    objBigBox.style.display="block";

}

//移除：浮动的box和bigBox隐藏

objSmallBox.onmouseout=function(){

    objFloatBox.style.display="none";

    objBigBox.style.display="none";

}

   objSmallBox.onmousemove=function(ev){

    var _event=ev;

    //1.第一件事，跟随鼠标的位置来计算放大镜的位置

    //计算值：

    var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;

    var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

    //把值赋值给放大镜

    objFloatBox.style.left=left+"px";

    objFloatBox.style.top=top+"px";

objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";

objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";）

if(left<0) left=0;

if(top<0) top=0;

if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)

        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;

if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)

        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;
<div id="demo">

    <div id="small-box">

        <div id="mark"></div>

        <div id="float-box"></div>

        <img src="imgs/macbook-small.jpg"/>

    </div>

    <div id="big-box">

        <img src="imgs/macbook-big.jpg"/>

    </div>

</div>
<style>

    * {

        margin:;

        padding: 0

    }

    #demo {

        display: block;

        width: 400px;

        height: 255px;

        margin: 50px;

        position: relative;

        border: 1px solid #ccc;

    }

    #small-box {

        position: relative;

        z-index:;

    }

#float-box {

    display: none;

    width: 160px;

    height: 120px;

    position: absolute;

    background: #ffffcc;

    border: 1px solid #ccc;

    filter: alpha(opacity=50);

    opacity: 0.5;

}

#mark {/*应该是把图片放在这个上面，它的透明度为0，是个block*/

    position: absolute;

    display: block;

    width: 400px;

    height: 255px;

    filter: alpha(opacity=0);/*过滤器，目前只有少数浏览器支持*/

    opacity:;

    z-index:;

}

#big-box {

        display: none;

        position: absolute;

        top:;

        left: 460px;

        width: 400px;

        height: 300px;

        overflow: hidden;

        border: 1px solid #ccc;

        z-index:;;

    }

    #big-box img {

        position: absolute;

        z-index: 5

    }

</style>

完整源代码：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style>

        * {

            margin: 0;

            padding: 0

        }

        #demo {

            display: block;

            width: 400px;

            height: 255px;

            margin: 50px;

            position: relative;

            border: 1px solid #ccc;

        }

        #small-box {

            position: relative;

            z-index: 1;

        }

        #float-box {

            display: none;

            width: 160px;

            height: 120px;

            position: absolute;

            background: #ffffcc;

            border: 1px solid #ccc;

            filter: alpha(opacity=50);

            opacity: 0.5;

        }

        #mark {/*应该是把图片放在这个上面，它的透明度为0，是个block*/

            position: absolute;

            display: block;

            width: 400px;

            height: 255px;

            background-color: #fff;

            filter: alpha(opacity=0);/*过滤器，目前只有少数浏览器支持*/

            opacity: 0;

            z-index: 10;

        }

        #big-box {

            display: none;

            position: absolute;

            top: 0;

            left: 460px;

            width: 400px;

            height: 300px;

            overflow: hidden;

            border: 1px solid #ccc;

            z-index: 1;;

        }

        #big-box img {

            position: absolute;

            z-index: 5

        }

    </style>

    <script>

        //页面加载完毕后执行

        window.onload = function () {

            //找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,

            var objDemo=document.getElementById("demo");

            var objSmallBox=document.getElementById("small-box");

            var objMarkBox=document.getElementById("mark");

            var objFloatBox=document.getElementById("float-box");

            var objBigBox=document.getElementById("big-box");

            var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

            //给小盒子添加事件，移入和移出

            //移入：浮动的box和和bigBox显示

            objSmallBox.onmouseover=function(){

                objFloatBox.style.display="block";

                objBigBox.style.display="block";

            }

            //移除：浮动的box和bigBox隐藏

            objSmallBox.onmouseout=function(){

                objFloatBox.style.display="none";

                objBigBox.style.display="none";

            }

            //给小盒子添加鼠标移动事件

            objMarkBox.onmousemove=function(ev){

                var _event=ev||window.event;//做兼容性，兼容IE

                //1计算值：

                var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;

                var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

                //5.优化，在前面加判断,不让其溢出，加判断

                if(left<0) left=0;

                if(top<0) top=0;

                if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)

                        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;

                if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)

                        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

                //2把值赋值给放大镜

                objFloatBox.style.left=left+"px";

                objFloatBox.style.top=top+"px";

                //3计算比例

                var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);

                var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

                //4利用这个比例计算距离后赋值给右侧的图片

                objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";

                objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";

            }

        }

    </script>

</head>

<body>

<div id="demo">

    <div id="small-box">

        <div id="mark"></div>

        <div id="float-box"></div>

        <img src="imgs/macbook-small.jpg"/>

    </div>

    <div id="big-box">

        <img src="imgs/macbook-big.jpg"/>

    </div>

</div>

</body>

</html>

原生js放大镜效果的更多相关文章

  1. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  2. 最全js 放大镜效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  4. jS放大镜效果

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...

  5. 原生js手风琴效果

    //js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历  排他 for( var i=0;i&l ...

  6. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  7. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  8. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  9. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

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

随机推荐

  1. C和C++从零开始系列(二)

    今天说一下 C和C++ 的if 条件语句. 在实际编程中,会经常有逻辑判断,比如,输入的数值参数中,如果是奇数,输出This is uneven. 如果是偶数,输出 This is even. 我们在 ...

  2. CapSupport 的使用

    CapSupport 是在CAP的操作上做了一些封装 目的是让事务同时执行或者同时回滚 startup services.AddCapSupport((optaion) => { optaion ...

  3. pv操作与信号量详解

    对于信号量,可以认为是一个仓库,有两个概念,容量和当前的货物个数. P操作从仓库拿货,如果仓库中没有货,线程一直等待,直到V操作,往仓库里添加了货物,为了避免P操作一直等待下去,会有一个超时时间. V ...

  4. JAVA 使用jgit管理git仓库

    最近设计基于gitops新的CICD方案,需要通过java读写git仓库,这里简单记录下. JGit是一款pure java的软件包,可以读写git仓库,下面介绍基本使用. 引入jgit maven引 ...

  5. 计算密集型和 io 密集型项目的使用场景分析和代码演示

    from threading import Thread from multiprocessing import Process import time 计算密集型 def work1(): res= ...

  6. 3种骚操作，教你查看 Java 字节码！

    在我们工作.学习.以及研究 JVM 过程当中,不可避免的要查看 Java 字节码,通过查看字节码可以了解一个类的编译结果,也能通过编译器层面来分析一个类的性能. 字节码文件是不能直接打开的,下面栈长教 ...

  7. [译]C# 7系列，Part 5: private protected 访问修饰符

    原文:https://blogs.msdn.microsoft.com/mazhou/2017/10/05/c-7-series-part-5-private-protected/ C#有几个可访问性 ...

  8. c++-多态的练习

    多态的几个小练习 练习一 #include <iostream> #include <string> using namespace std; class Fu { publi ...

  9. [追热点]了解 Cloud Native 云原生

    起源和发展 Pivotal 是云原生应用的提出者,并推出了 Pivotal Cloud Foundry 云原生应用平台和 Spring 开源 Java 开发框架,成为云原生应用架构中先驱者和探路者. ...

  10. 拥抱微服务，CODING 即将上线单项目多仓库功能

    随着数字化时代的全面到来,越来越多的企业开始尝试物联网.人工智能等新兴技术,用以加快自身的转型速度并积极开拓新的市场.互联网的兴起让各个行业的业务场景.用户行为.交互方式等都发生了巨大的变化.线上业务 ...