效果：

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. A.Changing Volume

    题目:改变音量 题意:给定两个数a和b,有6个操作(-5, -2, -1, +1, +2, +5),求a变到b的最小操作次数 操作的过程中不能变到小于0,即音量不能调到小于0 分析: (贪心),我们可 ...

  2. 什么是jsp(java server pages)

    JSP是一种运行在服务器端的脚本语言,是用来开发动态网页的技术,它是JAVA Web 程序开发的重要技术.本章介绍JSP技术的相关概念以及如何开发JSP程序,主要内容包括JSP技术简介.JSP的处理过 ...

  3. python学习-excel读取

    # 第三方库 openpyxl # install 安装# pip install openpyxl # 引入第三方库# excel操作的流程:# 打开excel,进入工作薄 workbook# 选择 ...

  4. 《Java基础知识》Java IO流详解

    Java IO概念 1. 用于设备之间的数据传输. 2. Java 将操作数据流的功能封装到了IO包中. 3. 数据流流向分:输入流和输出流,操作对象为文件. 4. 流按照操作数据分:字节流(通用)和 ...

  5. 《Java知识应用》Java-线程池（ScheduledExecutorService）

    先回顾一下,Runnable 的使用方法. package demo.knowledgepoints.scheduledtask.run; /*** * 线程类 */public class Thre ...

  6. Python爬虫实战：批量下载网站图片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以 ...

  7. ORA-07217 environment variable cannot be evaluated

    问题描述:还是rman的问题,一个很沙雕的问题,改了半天,准备是要做数据库的全备,和归档的备份 1.连接rman进行备份,这里要保持数据库为mount状态,因为要对数据库全备 [oracle@orcl ...

  8. OpenResty + ModSecurity + OWASP CRS

    本篇将介绍如何使用OpenResty和ModSecurity 来构建自己的WAF,安装过程整体与Nginx是类似的,但也有些区别,在文中会特别指出,本篇算是用openresty对前面两篇nginx和c ...

  9. C#中的时间戳

    来源:https://blog.guoqianfan.com/2019/11/24/timestamp-in-csharp/ 什么是时间戳 时间戳默认是Unix时间戳. 首先要清楚JavaScript ...

  10. oracle中创建用户、角色、权限、表空间简单使用

    一.数据库用户 创建数据库用户 create user 用户名 identified by 密码; 授权 grant 权限名 to 用户名; 查看当前用户权限 select * from sessio ...