原理：放置两张相同的图片，一张作为主图片（图片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. 【漏洞复现】Office远程代码执行漏洞（CVE-2017-11882）

    昨晚看到的有复现的文章,一直到今天才去自己复现了一遍,还是例行记录一下. POC: https://github.com/Ridter/CVE-2017-11882/ 一.简单的生成弹计算器的doc文 ...

  2. Matlab中fspecial的用法

    来源:https://blog.csdn.net/hustrains/article/details/9153553 Fspecial函数用于创建预定义的滤波算子,会与imfilter搭配使用,其语法 ...

  3. 【题解】CF1207E XOR Guessing

    Link 这是一道交互题. \(\text{Solution:}\) 观察到猜的数范围只有\(2^{14}.\) 我第一次想到的方法是,我们可以确定系统选择的两个数的异或和,用这个异或和去穷举所有目标 ...

  4. HashMap 、ConcurrentHashMap知识点全解析

    散列表 在了解hashmap之前,要先知道什么是散列表,因为hashmap就是在散列表结构基础上改造而成的.散列表,也叫哈希表,是根据关键码值(key value)而直接进行访问的数据结构.也就是说, ...

  5. centos7 安装k8s kubectl 客户端

    1. 配置k8s的kubelet 管理客户端 1 cat <<EOF > /etc/yum.repos.d/kubernetes.repo 2 [kubernetes] 3 name ...

  6. mac电脑上安装appium报错：Failed at the appium-chromedriver@4.25.1 postinstall script.

    mac电脑安装appium,装好node.js后,使用命令:npm install appium@1.18.0,安装appium,报如下错误 ``` ERR! errno1 ERR! appium-c ...

  7. c# 误区系列（一）

    前言 整理很早以前认为的一些误区,准备整理一个系列.新手可以看下,然后大佬指点一下是否哪些地方错了. 正文 值类型存在栈上,引用类型存在堆上 很多人认为用这句话来解释值类型和栈类型的区别,甚至有些文章 ...

  8. Seaborn系列 | 散点图scatterplot()

    散点图 解读 可以通过调整颜色.大小和样式等参数来显示数据之间的关系. 函数原型 seaborn.scatterplot(x=None, y=None, hue=None, style=None, s ...

  9. Helium文档1-WebUI自动化-环境准备与入门

    前言 Helium 是一款 Web 端自动化开源框架,全称是:Selenium-Python-Helium,从名字上就可以看出,Helium 似乎和 Selenium 息息相关,基于Selenium的 ...

  10. 栈和堆 - JS

    原始值 - Stack (栈) Number String Boolean undefined null 引用值 - Heap (堆) array object function ...data Re ...