放大镜：

1、比例系数要恒定：在系数为4的情况下，若原图是820*512，那么小图必须是205*128，放大镜若是50，原图显示区域必须200

2、计算鼠标在小图中的坐标

3、放大镜需要在鼠标中间位置，也就是鼠标在盒子中的坐标减去其宽度高度的一半

4、放大镜移动范围：marginLeft、marginTop的值必须是0到小图宽度、高度减去放大镜宽度、高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 400px;

            margin: 150px auto;

            position: relative;

        }

        .small {

            position: relative;

            width: 205px;

            height: 128px;

            border: 1px solid #CCA55B;

        }

        .magnifier {

            position: absolute;

            top: 0;

            left: 0;

            width: 50px;

            height: 50px;

            background-color: #ccc;

            opacity: 0.3;

            display: none;

            cursor: move;

        }

        .big {

            position: absolute;

            width: 200px;

            height: 200px;

            border: 1px solid red;

            top: 0;

            left: 215px;

            display: none;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="small">

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

        <div class="magnifier"></div>

    </div>

    <div class="big">

        <img src="data:images/nba.jpg" style="float: left">

    </div>

</div>

<script>

    var box = document.getElementsByTagName("div")[0];

    var samll = box.children[0];

    var magnifier = samll.children[1];

    var big = box.children[1];

    var img = big.children[0];

    //1、进入盒子显示，离开隐藏

    samll.onmouseenter = function () {

        magnifier.style.display = "block";

        big.style.display = "block";

    }

    samll.onmouseleave = function () {

        magnifier.style.display = "none";

        big.style.display = "none";

    }

    //2、鼠标进入盒子

    samll.onmousemove = function (ev) {

        var pageX = ev.pageX || scroll().left + ev.clientX;

        var pageY = ev.pageY || scroll().top + ev.clientY;

        //small.offsetLeft=0，因为他的相对的是box的距离就是0px,所以取box.offsetLeft的值

        var x = pageX - box.offsetLeft - magnifier.offsetWidth / 2;//让鼠标在放大镜中间

        var y = pageY - box.offsetTop - magnifier.offsetHeight / 2;//让鼠标在放大镜中间

        if (x < 0) {

            x = 0;

        }

        //samll.offsetWidth包括了2px的边框

        if (x >= samll.offsetWidth - 2 - magnifier.offsetWidth) {

            x = samll.offsetWidth - 2 - magnifier.offsetWidth;

        }

        if (y < 0) {

            y = 0;

        }

        if (y >= samll.offsetHeight - 2 - magnifier.offsetHeight) {

            y = samll.offsetHeight - 2 - magnifier.offsetHeight;

        }

        magnifier.style.left = x + "px";

        magnifier.style.top = y + "px";

        var xiShu = (big.offsetWidth - 2) / magnifier.offsetWidth;//big.offsetWidth包括了2px边框的宽度

        img.style.marginLeft = -xiShu * x + "px";

        img.style.marginTop = -xiShu * y + "px";

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

JS——放大镜的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. js放大镜代码

    js原生放大镜 <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta char ...

  3. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  4. jS放大镜效果

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...

  5. JS放大镜特效（兼容版）

    原理 1.鼠标在小图片上移动时,通过捕获鼠标在小图片上的位置,定位大图片的相应位置 设计 1.页面元素:小图片.大图片.放大镜 2.技术点:事件捕获.定位 1)onmouseover:会在鼠标指针移动 ...

  6. 最全js 放大镜效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 放大镜用法bug解决

    <img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /> ...

  8. 原生js放大镜效果

    效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...

  9. js放大镜

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Javaweb中文乱码问题

    request.setCharacterEncoding("utf-8");必须写在获得参数之前,即request.getParameter();之前

  2. SVN提交时报错：Commit blocked by pre-commit hook (exit code 1) with no output.

    可能的原因: 提交代码的SVN命令中,Comment长度短了.参考:http://tortoisesvn.net/docs/nightly/TortoiseSVN_en/tsvn-howto-minl ...

  3. ZooKeeper实现配置中心的实例（原生API实现）（转）

    说明:要实现配置中心的例子,可以选择的SDK有很多,原生自带的SDK也是不错的选择.比如使用I0Itec,Spring Boot集成等. 大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应 ...

  4. DELPHI新版本WEBSERVICE的变化

    DELPHI新版本WEBSERVICE,不仅可以编译成ISAPI DLL,依靠IIS部署, 并且还可以编译成单独的EXE,不再依赖IIS就可以独立运行,这一点未尝不可以说是非常方便的改进.

  5. C++模板的特化与偏特化

    http://cppblog.com/SmartPtr/archive/2007/07/04/27496.html (1) 类模板定义一个栈的类模板,它可以用来容纳不同的数据类型 template & ...

  6. 【CV论文阅读】Two stream convolutional Networks for action recognition in Vedios

    论文的三个贡献 (1)提出了two-stream结构的CNN,由空间和时间两个维度的网络组成. (2)使用多帧的密集光流场作为训练输入,可以提取动作的信息. (3)利用了多任务训练的方法把两个数据集联 ...

  7. 此人牛b,学习榜样

    http://liyangliang.me/about/ ------------------------------------------------------------2017年11月12日 ...

  8. UltraEdit UE如何设置自动换行

    1如何设置Ultraedit自动换行     学过编程方面电脑知识的朋友可能都清楚,ultraedit是一款易用强大的文本编辑工具.并且打开没有Unicode签名(BOM)的UTF-8格式半角英文文件 ...

  9. Eclipse改动Project的文件夹位置

    Eclipse打开时会要求指定一个workspace, 在这个workspace中能够创建多个相关的或无关的Project, 这些Project的文件夹位置信息存储在: <path to wor ...

  10. LeetCode 917. Reverse Only Letters (仅仅反转字母)

    题目标签:String 利用left, right 两个pointers, 从左右开始 互换 字母.如果遇到的不是字母,那么继续移动到下一个. Java Solution: Runtime beats ...