放大镜：

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. java多线程编程核心技术（三）--线程间通信

    1.等待/通知机制 1.wait()方法:使当前执行代码的线程进行等待.wait()方法是Object类的方法,该方法将当前线程放入“预执行队列”中,并在wait()所处的代码行处停止执行.只到被唤起 ...

  2. QT .pro文件的学习收获

    1. 载pro文件预定义宏: CONFIG(debug,debug|release){ DEFINES+=__DEBUG__ }else{ DEFINES+=__RELEASE__ macx:DEST ...

  3. A - 不容易系列之(3)―― LELE的RPG难题 简单递推

    人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Cole终于知道了原因,原来,LELE最近研 ...

  4. MyBatis3-示例工程

    一.准备工作: 0.新建QuitStart类型POM项目(即Application),Java Build Path为JDK1.8,Java Compiler为1.8,MySQL为5.5.38,数据库 ...

  5. event loop js事件循环 microtask macrotask

    转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...

  6. 交换机tagged与untagged的关系深入探讨

    端口接收数据时: 如果端口是tagged方式,当数据包本身不包含VLAN的话,输入的数据包就加上该缺省vlan:如果数据包本身已经包含了VLAN,那么就不再添加. 如果是untagged方式,输入的数 ...

  7. 推断给定的IP地址是否是内网IP

    /** * 推断给定的IP地址是否是内网IP * * @author GaoHuanJie */ public class Test{ public boolean isInnerIP(String ...

  8. [LeetCode][Java] Palindrome Number

    题目: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could neg ...

  9. eclipse中报错：java.lang.OutOfMemoryError: Java heap space

    问题: 在eclipse中执行java程序.去重100多万的数据,报例如以下错误: java.lang.OutOfMemoryError: Java heap space 异常原因: 在JVM中假设9 ...

  10. shell学习三十七天----引用

    引用 案例,假设我想输出一个星号(*),使用echo怎样做? echo * 这是肯定不行的,须要将*转移,即:echo \* 这样就引出了引用的概念.所为引用,是用来防止shell将某些你想要的东西解 ...