动图效果：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .container,

            img,

            .bigger {

                width: 200px;

                height: 200px;

            }

            .container {

                display: inline-block;

                position: relative;

                background: url(images/1.png) center;

                background-size: contain;

            }

            img {

                position: absolute;

                top: 0;

                left: 0;

            }

            .box {

                width: 100px;

                height: 100px;

                background-color: #ffff7f;

                opacity: 0.7;

                position: absolute;

            }

            .bigger {

                position: relative;

                display: inline-block;

                overflow: hidden;

            }

            .biggerImg {

                position: absolute;

                transform: scale(2);

                transform-origin: top left;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="box" style="top: 0px;left: 0px;"></div>

        </div>

        <div class="bigger">

            <img class="biggerImg" src="./images/1.png" style="display: none;" />

        </div>

    </body>

    <script type="text/javascript">

        var container = document.querySelector(".container");

        var box = document.querySelector(".box");

        var bigger = document.querySelector(".biggerImg");

        var width = box.parentNode.offsetWidth;

        var height = box.parentNode.offsetHeight;

        container.addEventListener("mousedown", function() {

            bigger.style.display = "block";

            container.addEventListener("mousemove", mouseMove);

            container.addEventListener("mouseup", function() {

                bigger.style.display = "none";

                container.removeEventListener("mousemove", mouseMove);

            })

        });

        function mouseMove(e) {

            if (e.clientY - 50 < 0) {

                box.style.top = 0;

                bigger.style.top = 0;

            } else if (e.clientY - 50 > 100) {

                box.style.top = 100;

                bigger.style.top = 100;

            } else {

                box.style.top = e.clientY - 50 + "px";

                bigger.style.top = -2 * (e.clientY - 50) + "px";

            }

            if (e.clientX - 50 < 0) {

                box.style.left = 0;

                bigger.style.left = 0;

            } else if (e.clientX - 50 > 100) {

                box.style.left = 100;

                bigger.style.left = 100;

            } else {

                box.style.left = e.clientX - 50 + "px";

                bigger.style.left = -2 * (e.clientX - 50) + "px";

            }

        }

    </script>

</html>

js 鼠标放到图片上放大某一部分效果的更多相关文章

  1. jQuery实现鼠标放到图片上，放大图片

    <script src="../../Script/jquery-1.7.2.js" type="text/javascript"></scr ...

  2. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  3. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 原生JS实现异步图片上传（预览）

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  6. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. 使用iframe实现图片上传预览效果

    原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片. Default.aspx: <%@ Page ...

  9. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

随机推荐

  1. 搭载Dubbo+Zookeeper踩了这么多坑,我终于决定写下这篇!

    大家好,我是melo,一名大二上软件工程在读生,经历了一年的摸滚,现在已经在工作室里边准备开发后台项目啦. 这篇文章我们不谈数据结构了,来谈谈入门分布式踩过的坑.感觉到了分布式这一层,由于技术更新迭代 ...

  2. Spark RDD编程（博客索引，日常更新）

    本篇主要是记录自己在中解决RDD编程性能问题中查阅的论文博客,为我认为写的不错的建立索引方便查阅,我的总结会另立他篇 1)通过分区(Partitioning)提高spark性能https://blog ...

  3. [no code][scrum meeting] Alpha 5

    项目 内容 会议时间 2020-04-10 会议主题 后端技术讨论 会议时长 30min 参会人员 全体成员 $( "#cnblogs_post_body" ).catalog() ...

  4. the Agiles Scrum Meeting 8

    会议时间:2020.4.16 20:00 1.每个人的工作 今天已完成的工作 个人结对项目增量开发组:完成个人项目创建的部分功能 issues:增量组:准备评测机制,增加仓库自动创建和管理 团队项目增 ...

  5. 软件工程个人博客作业-软件案例分析：VS与VS Code

    项目 内容 本作业属于北航 2020 年春软件工程 博客园班级连接 本作业是本课程个人项目作业 作业要求 我在这个课程的目标是 提高软件开发能力.团队协作能力 这个作业在哪个具体方面帮助我实现目标 提 ...

  6. 基于RequestBodyAdvice和ResponseBodyAdvice来实现spring中参数的加密和解密

    在日常开发中,有时候我们经常需要和第三方接口打交道,有时候是我们调用别人的第三方接口,有时候是别人在调用我们的第三方接口,那么为了调用接口的安全性,一般都会对传输的数据进行加密操作,如果每个接口都由我 ...

  7. MySQL 的架构与组件

    MySQL 的逻辑架构图设计图 连接/线程处理:管理客户端连接/会话[mysql threads] 解析器:通过检查SQL查询中的每个字符来检查SQL语法,并为每个SQL查询生成  SQL_ID. 此 ...

  8. 从零开始的DIY智能家居 - 基于 ESP32 的智能光照传感器

    前言 上周出差有点急,结果家里灯没关,开了整整一周的时间(T▽T),整个人都裂开了,准备做一个能够远程控制灯的东西,让我以后出差能远程把家里灯关了. 第一步就是做这期的主题 - 智能光照传感器,因为我 ...

  9. Python matplotlib 概率论与数理统计 伯努利分布 二项分布

    Python 代码实现 二项分布 import numpy as np import matplotlib.pyplot as plt import math from scipy import st ...

  10. hdu 5175 Misaki's Kiss again（GCD和异或）

    题意: 给一个数N. 如果GCD(N,M) = N XOR M,则称M是一个kiss   1<=M<=N 问总共有多少个kiss.并且列出所有的值. 思路: 思路一:枚举M.有大量的GCD ...