动图效果：

代码：

<!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. 自定义Push/Pop和Present/Dismiss转场

    项目概述 iOS中最常见的动画无疑是Push和Pop的转场动画了,其次是Present和Dismiss的转场动画. 如果我们想自定义这些转场动画,苹果其实提供了相关的API,在自定义转场之前,我们需要 ...

  2. 2020BUAA软工个人博客作业

    2020BUAA软工个人博客作业 17373010 杜博玮 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人博客作业 我在这个课程的目标是 学 ...

  3. Spring Authorization Server的使用

    Spring Authorization Server的使用 一.背景 二.前置知识 三.需求 四.核心代码编写 1.引入授权服务器依赖 2.创建授权服务器用户 3.创建授权服务器和客户端 五.测试 ...

  4. Spring父子上下文的使用案例

    Spring父子上下文的使用案例 一.背景 二.需求 三.实现步骤 1.基础代码编写 2.测试结果 四.小彩蛋 五.完整代码 一.背景 最近在看在使用Spring Cloud的时候发现,当我们通过Fe ...

  5. 线路由器频段带宽是是20M好还是40M好

    无线路由器频段带宽还是40M好. 40M的信号强,速度快.   1.20MHz在11n的情况下能达到144Mbps带宽.穿透性不错.传输距离较远 40MHz在11n的情况下能达到300Mbps带宽.穿 ...

  6. vscode插件集合整理

    针对PEPE8进行代码规范提示,安装flake8之后写代码的时候编辑器就会提示哪里出错,代码格式不规范也会提示,具体安装方式如下: 1.pip install flake8 2.安装flake8成功后 ...

  7. 大型DELETE（删除大量数据）的一种解决方案

    通过执行单条DELETE语句来删除一个大型的数据集会有以下的缺点: 1.DELETE语句的操作要被完整地记录到日志中,这要求在事务日志中要有足够的空间以完成整个事务: 2.在删除操作期间(可能会花费很 ...

  8. Ubuntu14.04安装ia32-libs报错

    安装编译环境的时候报错 sudo apt-get install ia32-libs Reading package lists... Done Building dependency tree Re ...

  9. 『学了就忘』Linux基础 — 16、Linux系统与Windows系统的不同

    目录 1.Linux严格区分大小写 2.Linux一切皆文件 3.Linux不靠扩展名区分文件类型 4.Linux中所有的存储设备都必须在挂载之后才能使用 5.Windows下的程序不能直接在Linu ...

  10. Kafka 消费迟滞监控工具 Burrow

    Kafka 官方对于自身的 LAG 监控并没有太好的方法,虽然Kafka broker 自带有 kafka-topic.sh, kafka-consumer-groups.sh, kafka-cons ...