放大镜：

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. linux命令与技巧

    1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i

  2. Eclipse错误出现：Unable to install breakpoint in... （未能解决）

    Unable to install breakpoint in... Eclipse Unable to install breakpoint in  的问题还是没解决 1.重装eclipse无效 2 ...

  3. Ubuntu18.04卸载lnmp

    1.卸载 apache2 sudo apt-get --purge remove apache2* sudo apt-get autoremove apache2 (--purge 是完全删除并且不保 ...

  4. OpenCV基础篇之像素操作对照度调节

    程序及分析 /* * FileName : contrast.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Tue 29 ...

  5. Solid Edge如何制作装配体的剖视图

    在装配体中,点击检视-剖面   选择剖切方向(向内是指把矩形框之内的东西去掉不要,向外是指把矩形框之外的东西去掉不要),选择剖切深度   最后效果如下图所示   你也可以选择不剖切的零件,效果如下图所 ...

  6. 分布式消息服务DMS如何实现死信消息的消费

    本文部分内容节选自华为云帮助中心的分布式消息服务(DMS)服务的产品介绍 死信消息是什么 死信消息是指无法被正常消费的消息.分布式消息服务DMS支持对消息进行异常处理.当消息进行多次重复消费仍然失败后 ...

  7. 洛谷P2744 [USACO5.3]量取牛奶Milk Measuring

    题目描述 农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位--译者注) 他的最好的牛奶,并把它装入一个大瓶子中卖出.消费者要多少,他就给多少,从不有 ...

  8. MSP430:PWM产生

    #define     PWM                      BIT6 //  Description: This program generates one PWM output on ...

  9. php排序函数测试

    1.sort,asort,arsort函数 十万个数的数组排序,用了0.17秒 $starttime=explode(' ',microtime());;for ($i=0; $i <10000 ...

  10. [Apple开发者帐户帮助]七、注册设备（3）禁用或启用设备

    您可以禁用和启用设备,但不能从开发者帐户中删除它.您可以禁用不再用于开发或测试的设备.但是,这样做会使包含设备的配置文件无效,并且不会增加当年设备的总数. 所需角色:帐户持有人或管理员. 在“ 证书” ...