效果：

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. Python爬虫之cookie的获取、保存和使用【新手必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:huhanghao Cookie,指某些网站为了辨别用户身份.进行ses ...

  2. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  3. visual studio code开发代码片段扩展插件

    背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...

  4. JS实现链式调用 a().b().c()

    function a() { this.b = function () { console.log('111') return this } this.c = function () { consol ...

  5. iview可收缩侧边菜单实现（支持二级菜单）

    想用iview做一个可以伸缩的侧边菜单栏,效果如下: 1.侧边栏收缩前:可以通过点击菜单分类展开子菜单项: 2.可以让用户点击图标动态收缩菜单栏: 3.侧边栏收缩后:只显示菜单分类的图标,鼠标放置在菜 ...

  6. poj 1321 棋盘问题 （回溯法）

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 69951   Accepted: 33143 Descriptio ...

  7. 如何用Pact进行微服务集成测试

    原文链接 https://codefresh.io/docker-tutorial/how-to-test-microservice-integration-with-pact/ 挑战:微服务集成测试 ...

  8. vue+element 中 el-input框 限制只能输入数字及一位小数

    仅个人经验,希望能帮到有需要的人. 第一次写 就话不多说了直接上代码. <el-input @keyup.native="proving(index)" v-model=&q ...

  9. python中super的用法实例解析

    概念 super作为python的内建函数.主要作用如下: 允许我们避免使用基类 跟随多重继承来使用 实例 在单个继承的场景下,一般使用super来调用基类来实现: 下面是一个例子: class Ma ...

  10. Ansible自动化部署入门到进阶笔记

    目录 一.基本部署 安装Ansible Ansible配置文件 定义Inventory 使用秘钥方式连接 使用帮助 Ansible命令应用基础 二.常见模块 三.Ansible playbook 四. ...