效果：

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. idea 上传svn忽略文件

    在idea最下面找到Version Control 默认我们svn提交的文件都在Default ChangeList中 我们创建一个新的ChangeList

  2. 导入做好的java项目出现下面的错误：The project cannot be built until build path errors are resolved

    例子:       作者在eclipse中导入一个新的项目时,出现了三个错误,如图1中所示: 图1 3 errors 原因分析:        在这个工程中,作者在写的时候,在build path中添 ...

  3. python爬虫--爬虫介绍

    一 爬虫 1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样 2.互联网建立的目的? 互联网的核心价值在于数据的共享/传递:数据是存放于一台 ...

  4. MySQL的安装、启动和基础配置 —— windows版本

    下载 第一步:打开网址,https://www.mysql.com,点击downloads之后跳转到https://www.mysql.com/downloads 第二步 :跳转至网址https:// ...

  5. 牛客练习赛34 little w and Segment Coverage （差分区间）

    链接:https://ac.nowcoder.com/acm/contest/297/C来源:牛客网 题目描述 小w有m条线段,编号为1到m. 用这些线段覆盖数轴上的n个点,编号为1到n. 第i条线段 ...

  6. Django day03之学习知识点

    今日是路由层学习: 3.路由匹配 3.1 正则表达式的特点: 一旦正则表达式能够匹配到内容,会立刻结束匹配关系 直接执行对应的函数.相当于采用就近原则,一旦找到就不再继续往下走了 重点: 正则表达式开 ...

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

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

  8. SSM整合框架（基于IDEA的配置）

    Pom文件 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http:/ ...

  9. Internet History,Technology,and Security - Technology: Internets and Packets （Week5）

    Week5 Technology: Internets and Packets Welcome to Week 5! This week, we’ll be covering internets an ...

  10. JS---案例：完整的轮播图---重点！

    案例:完整的轮播图 思路: 分5部分做 1. 获取所有要用的元素 2. 做小按钮,点击移动图标部分 3. 做右边焦点按钮,点击移动图片,小按钮颜色一起跟着变 (克隆了第一图到第六图,用索引liObj. ...