原理：放置两张相同的图片，一张作为主图片（图片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. P2034 选择数字 / P2627 [USACO11OPEN]Mowing the Lawn G

    Link 题目描述 给定一行 \(n\) 个非负整数 \(a[1]..a[n]\) .现在你可以选择其中若干个数,但不能有超过 \(k\) 个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入 ...

  2. apt-get 安装软件时出现：“文件尺寸不符” 问题

    报错信息 命中:1 http://packages.deepin.com/deepin panda InRelease 命中:2 http://linux.teamviewer.com/deb sta ...

  3. Linux网卡命名规则

    网卡命名 一.为什么需要这个      服务器通常有多块网卡,有板载集成的,同时也有插在PCIe插槽的.Linux系统的命名原来是eth0,eth1这样的形式,但是这个编号往往不一定准确对应网卡接口的 ...

  4. 用pChart生成雷达图图片

    需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...

  5. [Docker] redis 全配置

    启动容器,加载配置文件并持久化数据 docker run -d --privileged=true -p 6379:6379 --restart always -v /usr/redis/conf:/ ...

  6. Python基本语法之数据类型(总览)

    Python的八种数据类型 Number,数值类型 String,字符串,主要用于描述文本 List,列表,一个包含元素的序列 Tuple,元组,和列表类似,但其是不可变的 Set,一个包含元素的集合 ...

  7. GIT之分支管理

    分支管理 一.分支推进 主分支 单线分支,随着代码的提交而形成的一条直线,HEAD 随着commit提交之后的节点移动而移动. 子分支 当切换到子分支的时候,HEAD 则指向子分支的节点. 在子分支上 ...

  8. Nginx禁止html等缓存

    +++ date="2020-10-16" title="Nginx禁止html等缓存" tags=["nginx"] categories ...

  9. scrapy基本爬虫，采集多页

    # -*- coding: utf-8 -*- import csv import scrapy class GjSpider(scrapy.Spider): name = 'gj' allowed_ ...

  10. Python基础数据类型及其转换

    数据类型: 浮点型float: 3.1415 也就是小数 整型 int: 123,主要用来运算,+-*/ 字符串 str: 'abc?', 记录少量信息 布尔值 bool: True or False ...