动图效果：

代码：

<!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. 海信A6/A6L A7Pro/CC A5PRO/A5PRO CC 安装gms google service指南

    用过海信双面屏或者eink手机的朋友都知道,海信手机就是死活安装不了谷歌全家桶,因为海信的领导说跟谷歌有协议不能安装谷歌框架(还说后期google审核坚决不给安装,人家其他ov mui都可以安装).不 ...

  2. Get Mingw-w64 via MSYS2

    Get Mingw-w64 via MSYS2 Get the latest version of Mingw-w64 via MSYS2, which provides up-to-date nat ...

  3. scala基础篇 使用getter和setter方法而不使用public的情形

    主要是基于2种情形 1) 提供读只取/只写入方法,不能随意读写 2)做赋值时变量控制,比如设定值的区间范围等 例子: object test{ def main(args: Array[String] ...

  4. CentOS 文本编辑器

    目录 1.Nano 1.1.基础命令 1.2.快捷操作 1.3.配置文件 2.Vim 2.1.四大模式 2.2.基础命令 2.3.标准操作 2.4.高级操作 2.5.配置文件 Linux 终端的文本编 ...

  5. tomcat内存马原理解析及实现

    内存马 简介 ​ Webshell内存马,是在内存中写入恶意后门和木马并执行,达到远程控制Web服务器的一类内存马,其瞄准了企业的对外窗口:网站.应用.但传统的Webshell都是基于文件类型的,黑客 ...

  6. Alpha发布声明

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 Alpha-发布声明 我们是谁 删库跑路对不队 我们在做什么 题士 进度如何 进度总览 一.功能与特性 1. ...

  7. 数位dp & 热身训练7

    数位dp 数位dp是一种计数用的dp,一般就是要统计一段区间$[L,R]$内,满足一定条件的数的个数,或者各个数位的个数. 数位dp使得暴力枚举变为满足一定状态的记忆化,更加优秀. 数位dp常常会考虑 ...

  8. 链地址法查找成功与不成功的平均查找长度ASL

    晚上,好像是深夜了,突然写到这类题时遇到的疑惑,恰恰这个真题只让计算成功的ASL,但我想学一下不成功的计算,只能自己来解决了,翻了李春葆和严蔚敏的教材没有找到相关链地址法的计算,于是大致翻到两篇不错的 ...

  9. Apache Kafka 学习笔记

    1. 介绍Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据. 这种动 ...

  10. 编写POC时候的几个参考项目

    0x01. 背景 在编写pocsuite时候,会查阅大量的文件,poc利用方式. ​ 1. pocsuite是什么 Pocsuite 是由知道创宇404实验室打造的一款开源的远程漏洞测试框架.它是知道 ...