放大镜：

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. Hyper-v交换机添加出错解决方法

    这个问题中文找不到解决方法,只能重新安装系统了 重新安装系统后,按照顺序操作,不要去动设备管理器中的东西,也不用动驱动,先删除虚拟机的网络连接,在删除虚拟交换机就可以了,没有再出现问题

  2. [codevs 1183][泥泞的道路（二分+spfa）

    题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...

  3. 时间插件,js格式化,js某月天数,js某月最后一天日期

    //时间格式化 Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 ...

  4. Stuts2的&quot;struts.devMode&quot;设置成true后，不起作用的解决的方法

    不用  <constant name="struts.devMode" value="true" /> 改成 <constant name=& ...

  5. Alcatel OmniSwitch 重置密码

    OmniSwitch 6250重置密码 Press s to STOP AT MINIBOOT... [Miniboot]->cd "network" value = 0 = ...

  6. Domino Server installation on Linux (Centos or Redhat) – something somewhere

    something somewhere welcome in there…:) Just another techki site howto / Linux / Lotus Domino 0 Domi ...

  7. AOP设计场景

    AOP就是切面编程的一个思想,当然完毕一项编码任务,发现有些东西是反复工作,这时就能够考虑使用AOP编程.把一些共性的东西交给它来完毕,我们仅仅关心业务逻辑的东西,最精彩用的场景有两种: 一,控制数据 ...

  8. wikioi 1029 中序遍历总数

    题意:给出前序遍历和后序遍历,求总共同拥有多少种中序遍历的可能. 思路: 对于一个节点.当且仅当它仅有一棵子树时,在保证先序和后序同样的前提下,才可能有不同的中序(它的子树可在左或右,所以有2种): ...

  9. STL源代码剖析(二) - 迭代器与traits技法

    提要 先看一段用迭代器的代码: int a[] = {1, 2, 3, 4, 5}; vector<int> v1( a, a+5); vector<int>::iterato ...

  10. MyEclipse 9.0 正式版公布新闻 下载

    MyEclipse 9.0 正式版公布 新闻 ============================================================================ ...