放大镜：

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. Eclipse新建/导入Gradle项目

    一.新建 1.[New]->[Project] 二.导入 1.[Import] 2. 参考: http://www.vogella.com/tutorials/EclipseGradle/art ...

  2. AWR and ADDM

    The Automatic Workload Repository Oracle collect a vast amount of statistics regarding the performan ...

  3. ci 在阿里云访问的时候404

    最近想把ci 弄到阿里云去,结果发现,本地好好的,到了阿里云就404了.网上查了下 原来是 配置文件的问题. 配置文件就是 vhost下面的 **.conf文件  要有这个才行 location / ...

  4. plsql developer 64位版本

    plsql developer 64位版本 http://www.3322.cc/soft/15748.html

  5. Flume NG源代码分析（二）支持执行时动态改动配置的配置模块

    在上一篇中讲了Flume NG配置模块主要的接口的类,PropertiesConfigurationProvider提供了基于properties配置文件的静态配置的能力,这篇细说一下PollingP ...

  6. Python FAQ1：传值，还是传引用？

    在C/C++中,传值和传引用是函数参数传递的两种方式.由于思维定式,从C/C++转过来的Python初学者也经常会感到疑惑:在Python中,函数参数传递是传值,还是传引用呢? 看下面两段代码: de ...

  7. Android 高仿 频道管理----网易、今日头条、腾讯视频 （能够拖动的GridView）附源代码DEMO

    距离上次公布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了.近期利用空暇时间,把今日头条client完好了下.完好的功能一个一个所有实现后.就放整个源代码.开发的进 ...

  8. Analyze提示:Value stored to &quot;***&quot;is never read

    text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;

  9. U4687 不无聊的序列

    U4687 不无聊的序列 0通过 85提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 如果一个序列的任意一个连续的子序列中没有只出现一次的元素,辣么kkk就认为这个序 ...

  10. 关于linux的用户

    1 linux支持多个用户 2 每个登陆用户有自己的shell,自己的home目录 3 可以将用户分组 4 用户对文件有各自的权限,从而将用户分割 5 用户对应属于它的一批进程 6 可以执行addus ...