效果：

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. 打开TXT文件并显示

    <!DOCTYPE html> <html> <head> <title></title> <script> function ...

  2. Nginx（一）--nginx的初步认识及配置

    什么是Nginx 是一个高性能的反向代理服务器正向代理代理的是客户端反向代理代理的是服务端 Apache.Tomcat.Nginx 静态web服务器jsp/servlet服务器 tomcat 安装Ng ...

  3. wxxcx_learn订单

    自动写入时间戳 protected $autoWriteTimestamp = true: 事务的使用 Db::startTrans();....... Db::commit();.. Db::rol ...

  4. 基于 Blazui 的 Blazor 后台管理模板 BlazAdmin 正式尝鲜

    简介 BlazAdmin 是一个基于Blazui的后台管理模板,无JS,无TS,非 Silverlight,非 WebForm,一个标签即可使用. 我将在下一篇文章讨论 Blazor 服务器端渲染与客 ...

  5. 大数据学习笔记——Linux完整部署篇(实操部分)

    Linux环境搭建完整操作流程(包含mysql的安装步骤) 从现在开始,就正式进入到大数据学习的前置工作了,即Linux的学习以及安装,作为运行大数据框架的基础环境,Linux操作系统的重要性自然不言 ...

  6. C语言每日一练——第6题

    一.题目要求 计算500~800区间素数的个数cnt,并按所求素数的值从大到小的顺序,计算其间隔间的减.加之和,即第1个素数-第2个素数+第3个素数-第4个素数+第5个素数.....的值sum.最后把 ...

  7. cygwin报错 /bin/bash: Operation not permitted

    如题,使用Cygwin过程中本来好好的,突然就不能登录了,每个用户登录都报错 /bin/bash: Operation not permitted.开始也以为是没有权限之类的,重装弄了很久也不行.后面 ...

  8. django基础之day09，多对多创建数据表的三种方式

    多对多三种创建方式 1.全自动(用在表关系不复杂的一般情况) class Book(models.Model): title=models.CharField(max_length=32) 多对多关系 ...

  9. Spring Cloud Config入门（本地配置）

    spring cloud config 简介 Spring Cloud Config为分布式系统中的外部化配置提供服务器和客户端支持.使用Config Server,您可以在所有环境中管理应用程序的外 ...

  10. 如何"快准狠"找到内存相关的问题

    为了迅速定位内存问题,通常会先运行几个覆盖面比较大的性能工具,比如 free.top.vmstat.pidstat 等. 具体的分析思路主要有这几步 先用 free 和 top,查看系统整体的内存使用 ...