原理：放置两张相同的图片，一张作为主图片（图片1），另一张作为用来裁剪并放大的图片（图片2）

         鼠标移动时，计算鼠标在图片1的位置（距离图片1左上角的x，y距离），以此决定在图片2开始裁剪的位置，放大用zoom:放大倍数

类似于京东淘宝查看图片的功能

HTML：

<img id="img1" src="data:images/1.jpg" style="position: absolute; width:600px; height:600px;"/>
<img id="img2" src="data:images/1.jpg" style="position: absolute; width:600px; height:600px;left:650px;" />
<div id="clipbox" style="position: absolute; width:100px; height:60px; border:1px solid blue; display:none"></div>

js:

js 图片放大镜功能的更多相关文章

  1. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  2. javascript 实现图片放大镜功能

    淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...

  3. vue中图片放大镜功能

    仿淘宝详情页图片鼠标移过去可对图片放大显示在右侧 效果图如下图,此功能支持PC端与移动端 接下来进入代码实现环节: 先准备两张图片,一张小图片叫 '土味.jpg',大小160*91:一张大图片叫 ' ...

  4. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  5. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  6. js图片放大镜特效代码

    <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var b ...

  7. js图片放大镜 可动态更换图片

    现仅已.NET为例,HTML代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > & ...

  8. js图片放大镜

    <!doctype html><html><head><meta charset="utf-8"><style>#sma ...

  9. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

随机推荐

  1. [WC 2011]最大Xor和路径

    题目大意: 给你一张n个点,m条边的无向图,每条边都有一个权值,求:1到n的路径权值和的最大值. 题解: 任意一条路径都能够由一条简单路径(任意一条),在接上若干个环构成(如果不与这条简单路径相连就走 ...

  2. 洛谷 P1903 [国家集训队]数颜色 / 维护队列 带修莫队

    题目描述 墨墨购买了一套\(N\)支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: \(1\). \(Q\) \(L\) \(R\)代表询问你从第\(L\) ...

  3. 【不知道怎么分类】NOIP2016 蚯蚓

    题目大意 洛谷链接 给出\(n\)条蚯蚓,给出\(m\)秒,每一秒都把蚯蚓中最长的蚯蚓分成两段,一段是原来的\(p\)倍,剩下的就是\((1-p)\)倍.每一秒,除了刚刚产生的两条新蚯蚓,其余蚯蚓长度 ...

  4. 互不侵犯（洛谷P1896）

    题目:在N*N的棋盘里面放k个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入输出:输入N,K,输出有几种放置方法. ...

  5. 如何使用懒加载 - umi

    .umirc.js文件 plugins: [       dynamicImport: true,

  6. linux(centos8):基于java13安装rocketmq-4.7.1(解决jdk不兼容的报错)

    一,Rocketmq是什么? 1, RocketMQ是一个队列模型的消息中间件,具有高性能.高可靠.高实时.分布式特点 相比kafka,rocketmq的实时性更强 2,官方网站: http://ro ...

  7. Anderson《空气动力学基础》5th读书笔记 第5记——推导二维机翼的空气动力学系数

    机翼的受力分析图 我们知道,空气对一个物体产生的升力和阻力以及力矩源于作用在整个物体上的压力分布和剪切力分布,所以我们分析上图可知(取单位展长的机翼): 对于上表面:                 ...

  8. 给萌新HTML5 入门指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...

  9. Angular双向绑定简单理解

    在使用Antd的时候,一直很好奇里面的双向绑定的自定义组件是怎么做的. 因为之前一直用,没有去细看文档. 今天抽空来简单的撸一下. 在ng中,()是单向数据流,从视图目标到数据源,[()]这样就是双向 ...

  10. Graph-to-ID task

    首先图像是一个二维的结构,CNN提取图片的特征,但是是local的,通过kenel的形式,不断的图上移动,通过卷积的形式, 无论移动到哪个位置,内部的结构都是不变的,这就是参数共享. 这个所说的图像显 ...