动图效果：

代码：

<!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. PG集群（PostgreSql环境）搭建

    centos PG集群搭建 一.安装PG 1.安装之前首先查看软件是否已经安装 rpm -qa | grep postgresql #若存在,需要卸载使用 yum remove postgresql ...

  2. Promise.resolve(x)中x有几种情况

    ps:下面参数说的是Promise.resolve(x)中的x 一共四种情况: 1.如果参数是Promise实例本身,则抛出错误 2.如果参数是一个promise对象,则then函数的执行取决于这个参 ...

  3. 半天撸一个简易版mybatis

    为什么需要持久层框架? 首先我们先看看使用原生jdbc存在的问题? public static void main(String[] args) { Connection connection = n ...

  4. springcloud (一）系统架构演变之路

    演变过程 从传统架构(单点应用)→分布式架构(以项目进行拆分)→SOA架构(面向服务架构)→微服务架构 1 传统架构 其实就是ssh架构或者ssm架构,属于单点应用,把整个开发业务模块都会在一个项目中 ...

  5. 使用registry搭建docker私服仓库

    使用registry搭建docker私服仓库 一.拉取 registry镜像 二.根据镜像启动一个容器 1.创建一个数据卷 2.启动容器 三.随机访问一个私服的接口,看是否可以返回数据 四.推送一个镜 ...

  6. OKR与影响地图，别再傻傻分不清

    摘要:OKR和影响地图虽然都是为了一个目标去进行规划的方法,但是两者侧重的内容却不一致. 本文分享自华为云社区<一分钟读懂OKR与影响地图>,作者: 敏捷的小智. 什么是OKR及影响地图 ...

  7. 「笔记」$Min\_25$筛

    总之我也不知道这个奇怪的名字是怎么来的. \(Min\_25\)筛用来计算一类积性函数前缀和. 如果一个积性函数\(F(x)\)在质数单点是一个可以快速计算的关于此质数的多项式. 那么可以用\(Min ...

  8. Spring Security：Servlet 过滤器（三）

    3)Servlet 过滤器 Spring Security 过滤器链是一个非常复杂且灵活的引擎.Spring Security 的 Servlet 支持基于 Servlet 过滤器,因此通常首先了解过 ...

  9. 第34篇-解析invokeinterface字节码指令

    与invokevirtual指令类似,当没有对目标方法进行解析时,需要调用LinkResolver::resolve_invoke()函数进行解析,这个函数会调用其它一些函数完成方法的解析,如下图所示 ...

  10. 30分钟通过Kong实现.NET网关

    什么是Kong Openrestry是一个基于Nginx与Lua的高性能平台,内部有大量的Lua库.其中ngx_lua_moudule使开发人员能使用Lua脚本调用Nginx模块.Kong是一个Ope ...