原理：放置两张相同的图片，一张作为主图片（图片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. python在一个画布上画多个子图

    转载:https://blog.csdn.net/qq_26449287/article/details/103022636 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使 ...

  2. Linux就该这么学28期——Day02 2.1-2.3

    本文记录必须掌握的Linux命令,部分内容引用自https://www.linuxprobe.com/basic-learning-02.html 工作中可使用https://www.linuxcoo ...

  3. [学习笔记] Tarjan算法求桥和割点

    在之前的博客中我们已经介绍了如何用Tarjan算法求有向图中的强连通分量,而今天我们要谈的Tarjan求桥.割点,也是和上篇有博客有类似之处的. 关于桥和割点: 桥:在一个有向图中,如果删去一条边,而 ...

  4. RHSA-2017:2930-重要: 内核 安全和BUG修复更新（需要重启、存在EXP、本地提权、代码执行）

    [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...

  5. ansible-playbook简介

    1. ansible-playbook简介 • Playbooks 与 adhoc 相比,是一种完全不同的运用 ansible 的方式,是非常之强大的. • 简单来说,playbooks 是一种简单的 ...

  6. 多测师_svn_004

    svn 版本控制工具项目管理中的版本控制问题:解决代码冲突困难容易引发bug难于恢复至正确版本无法进行权限控制项目版本发布困难 什么是版本控制是指维护工程蓝图的表座做法,能追踪工程蓝图从诞生到定案的过 ...

  7. 机器学习:集成学习:随机森林.GBDT

    集成学习(Ensemble Learning) 集成学习的思想是将若干个学习器(分类器&回归器)组合之后产生一个新学习器.弱分类器(weak learner)指那些分类准确率只稍微好于随机猜测 ...

  8. 加密sqlite3数据库文件

    目录 EncryptSqlite3 实现原理 使用方法 不足之处 GitHub地址 EncryptSqlite3 加密sqlite3数据库,产生的数据库文件别人打不开. 实现原理 在写入文件前对每个字 ...

  9. 面试一个百度T7程序员，一道简单的题没答上来！网友却都在吐槽面试官！

    程序员面试时都考些什么? 一个面试官得意洋洋地说自己面了一个百度T7,出了一道coding题,结果对方连最长上升子序列都写不出来.   楼主本想嘲弄一下百度T7的代码水平低,没想到网友们炸开了锅,纷纷 ...

  10. docker设置http访问

    1 编辑配置文件    vim /etc/docker/daemon.json { "registry-mirrors": ["https://a4fyjv0u.mirr ...