原理：放置两张相同的图片，一张作为主图片（图片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. Python3基础——字符串类型

    Text Sequence Type - str(immutable) class str(object='') class str(object=b'', encoding='utf-8', err ...

  2. 当安装、卸载件包时，出现依赖问题 error: Failed dependencies解决办法

    error: Failed dependencies:-- 依赖关系非常复杂,当你试图先安装任何一个包时都会出现这样的依赖关系错误,这时候你就应该强制安装了,我认为只要你把服务或软件需要的包都装上,强 ...

  3. 跟我一起学Redis之五种基本类型及其应用场景举例(干了6个小时)

    前言 来啦,老弟?来啦,上一篇就当唠唠嗑,接下来就开始进行实操撸命令,计划是先整体单纯说说Redis的各种用法和应用,最后再结合代码归纳总结. Redis默认有16个数据库(编号为0~15),默认使用 ...

  4. Tensorflow学习笔记No.1

    使用tf.keras.Sequential()建立网络模型 整个过程可分为五步:1创建Sequential模型,2添加所需要的神经层,3使用.compile方法确定模型训练结构,4使用.fit方法 使 ...

  5. 部署docker swarm集群

    基础环境 机器名称 IP地址 安装的软件 node-1 192.168.10.190 docker-ce node-2 192.168.10.191 docker-ce node-3 192.168. ...

  6. Redis 中 BitMap 的使用场景

    BitMap BitMap 原本的含义是用一个比特位来映射某个元素的状态.由于一个比特位只能表示 0 和 1 两种状态,所以 BitMap 能映射的状态有限,但是使用比特位的优势是能大量的节省内存空间 ...

  7. OpenStack最新版本--Victoria发布亮点与初体验

    前言 `OpenStack`是一个云操作系统,可控制整个数据中心内的大型计算,存储和网络资源池,所有资源均通过具有通用身份验证机制的`API`进行管理和配置. 还提供了一个仪表板,可让管理员进行控制, ...

  8. 【UER #1】DZY Loves Graph

    UOJ小清新题表 题目内容 UOJ链接 DZY开始有\(n\)个点,现在他对这\(n\)个点进行了\(m\)次操作,对于第\(i\)个操作(从\(1\)开始编号)有可能的三种情况: Add a b: ...

  9. nfs4使用中的防火墙配置

    一,查看本地centos的版本: [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) ...

  10. Spring Aop 详解二

    这是Spring Aop的第二篇,案例代码很详解,可以查看https://gitee.com/haimama/java-study/tree/master/spring-aop-demo. 阅读前,建 ...