原理：

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

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

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

技术点：

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

clientX、clientY：事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平、垂直坐标

offsetLeft、offsetTop：距离左侧和上部的距离，相对于窗口

offsetWidth、offsetHeight：本身的宽高，包括border

重点、难点：让小图和大图等比例同步移动

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

<html>

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style type="text/css">

            * {

                margin: 0px;

                padding: 0px;

            }

            .small-box {

                width: 300px;

                height: 300px;

                margin-left: 100px;

                margin-top: 100px;

                border: 1px #ccc solid;

                cursor: move;

                float: left;

                position: relative;

            }

            .small-box img {

                width: 300px;

                height: 300px;

            }

            .tool {

                width: 150px;

                height: 150px;

                background-color: gold;

                opacity: 0.6;

                filter: alpha(opacity=60);

                position: absolute;

                left: 0px;

                top: 0px;

                display: none;

            }

            .tool.active {

                display: block;

            }

            .big-box {

                width: 300px;

                height: 300px;

                border: 1px #ccc solid;

                overflow: hidden;

                float: left;

                margin-top: 100px;

                position: relative;

                display: none;

            }

            .big-box.active {

                display: block;

            }

            .big-box img {

                width: 600px;

                height: 600px;

                position: absolute;

            }

        </style>

    </head>

    <body>

        <div class="small-box" id="smallBox">

            <img src="data:images/img.jpg" />

            <div class="tool" id="tool"></div>

        </div>

        <div class="big-box" id="bigBox">

            <img src="data:images/img-lg.jpg" id="bigImg" />

        </div>

        <script>

            /*

                第一步：当页面加载完后，获取所要操作的节点对象。

                第二步：为smallBox添加一个鼠标浮动事件

                   当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子tool

                   和右边的大盒子（小黄盒子的放大版）bigBox

                   添加active

                  为smallBox添加一个鼠标离开事件

                   隐藏小黄盒子和右边的大盒子

                   去掉active

                第三步：为smallBox添加一个鼠标移动事件

                  小黄盒子tool要跟着鼠标的坐标移动

                  右边的大盒子里的图片也跟着指定的比例移动

               */

            var smallBox = document.getElementById("smallBox"); //小盒子

            var tool = document.getElementById("tool"); //小盒子中的黄色区域

            var bigBox = document.getElementById("bigBox"); //大盒子

            var bigImg = document.getElementById("bigImg"); //放大的图片

            //鼠标进入小盒子区域内，显示黄色区域和大盒子

            smallBox.onmouseenter = function() {

                tool.className = "tool active";

                bigBox.className = "big-box active";

            }

            //鼠标离开小盒子区域，不显示黄色区域和大盒子

            smallBox.onmouseleave = function() {

                tool.className = "tool";

                bigBox.className = "big-box";

            }

            //鼠标在小盒子内移动

            smallBox.onmousemove = function(e) {

                var _e = window.event || e; //事件对象

                //this.offsetLeft小图距离左边的距离

                //tool.offsetWidth放大镜的宽度，除以2的话鼠标就位于放大镜的中心了

                var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2; //事件对象在小盒子内的横向偏移量

                var y = _e.clientY - this.offsetTop - tool.offsetHeight / 2; //竖向偏移量

                if(x < 0) {

                    x = 0; //当左偏移出小盒子时，设为0

                }

                if(y < 0) {

                    y = 0; //当上偏移出小盒子时，设为0

                }

                if(x > this.offsetWidth - tool.offsetWidth) {

                    x = this.offsetWidth - tool.offsetWidth; //当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度

                }

                if(y > this.offsetHeight - tool.offsetHeight) {

                    y = this.offsetHeight - tool.offsetHeight; //当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度

                }

                tool.style.left = x + "px"; //黄色放大区域距离小盒子左偏距

                tool.style.top = y + "px"; //黄色放大区域距离小盒子上偏距

                bigImg.style.left = -x * 2 + "px"; //放大图片移动方向相反，偏移距离加倍（css样式中，大图div是小图div的2倍，所以乘2）

                bigImg.style.top = -y * 2 + "px";

            }

        </script>

    </body>

</html>

js实现放大镜效果的更多相关文章

  1. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  2. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 使用js实现放大镜效果

    点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页

  4. JS实现放大镜效果(放大图片)

    注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...

  5. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  6. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  7. 用js实现放大镜的效果

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...

  8. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  9. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

随机推荐

  1. Luogu 3233 [HNOI2014]世界树

    BZOJ 3572 首先看出虚树,然后考虑如何$dp$. 我们先在处理出的虚树上$dp$一遍,处理出虚树上所有点距离最近的关键点(关键点一定在虚树上嘛). 具体来说,先搜一遍处理出每一个点的父亲到它的 ...

  2. JAVA and JAVA WEB with TOMCAT and ECLIPSE 学习过程中遇到的字符乱码问题及解决方法汇总(随时补充)

    JAVA语言具有跨平台,unicode字符集编码的特点. 但是在开发过程中处理数据时涉及到的字符编码问题零零散散,尤其是处理中文字符时一不留神就可能出现一堆奇奇怪怪的符号,俗称乱码. 对于乱码,究其原 ...

  3. review backpropagation

    The goal of backpropagation is to compute the partial derivatives ∂C/∂w and ∂C/∂b of the cost functi ...

  4. Linux下性能监控工具介绍

    本章解释如何使用适用于Linux的大量性能工具及每个工具中信息的意义.即使已经使用top或者sar,也可能从本章学到相关知识. 应该养成使用这些工具的习惯.当然要知道如何诊断性能问题,但也应该定期寻找 ...

  5. 通配符的匹配很全面, 但无法找到元素 'tx:annotation-driven'

    配置Spring时出现如题这个错误,下面是xml的内容 <?xml version="1.0" encoding="UTF-8"?> <bea ...

  6. 2015年第六届蓝桥杯省赛试题（JavaA组）

    1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分17分)7.结果填空 (满分21分)8.程序设 ...

  7. MongoDB 分片2

    mongodb 在windows下面进行分片 mongodb 更新很快,在做分片的时候,查找了不少文章,但是很多已经过时了.现在把我搭建的过程及命令分享给大家.我用的是最新版本windows版3.4. ...

  8. 使用Privoxy转化SSH到HTTP代理

    为什么要进行转换? 一般我们很容易找到通过SOCKS5代理的方法,如SSH,但是很多浏览器或是软件只支持HTTP方式,所以就需要将我们的SSH代理模式转为HTTP代理方式  如何转换? 使用Privo ...

  9. 动态合并或定制GridView控件Header头某些列

    开发时,有时会对GridView控件头做一些字段合并.多行表头,多列合并,明白了其中的原理,实现起来,均能运用自如.下面Insus.NET分享自己的做法. 创建站点,创建aspx网页,拉GridVie ...

  10. Intent要使用的ACTION都有哪些？在哪里能查到详细的ACTION呢？

    Intent操作结构之一就是ACTION,这些ACTION都有哪些?在哪里能查到详细的ACTION呢? 官方文档: https://developer.android.com/reference/an ...