原理：放置两张相同的图片，一张作为主图片（图片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. TCP/IP 寻址

    原文:TCP/IP 寻址 第一节:TCP/IP 简介 第二节:TCP/IP 寻址 第三节:TCP/IP 协议 第四节:TCP/IP 邮件 TCP/IP 使用 32 个比特(bit)或者 4 个 0 到 ...

  2. 【题解】NOIP2018 旅行

    题目戳我 \(\text{Solution:}\) 首先题目描述有一点不准确:回头是必须要走完一条路无路可走的时候才能返回. 对于树的情况:显然贪心做就完事了. 对于基环树的情况:对于一个\(n\)条 ...

  3. 部署Prometheus+Grafana监控

    Prometheus 1.不是很友好,各种配置都手写 2.对docker和k8s监控有成熟解决方案 Prometheus(普罗米修斯) 是一个最初在SoudCloud上构建的监控系统,开源项目,拥有非 ...

  4. Win10下设置GOPATH系统变量，查看go env没有变化

    前言 最近在学习go语言,下载了golang安装包安装之后,使用go env查看环境变量,发现GOPATH已经指向默认的目录了 按照安装手册去系统变量设置了一下GOPATH,指向自定义目录 再来运行一 ...

  5. vue 下载jquery 下载layui-layer 下载vue-router

    1.下载jquery cmd:语句 npm install jquery 然后在main.js文件里面写 import $ from 'jquery' 2.下载layui-layer 在vue里面的l ...

  6. Vim最强调试插件：vimspector

    最近看到了韦大在知乎的回答后,想去试用一下vimspector,却发现vimspector诞生两年了却没有介绍它的中文资料.我查阅官方文档遇到不少困难,在这里记录折腾出来的结果,与大家分享. vims ...

  7. 解决SpringBoot 定时计划 quartz job 任务重复执行多次(10次)

    上一篇:SpringBoot多任务Quartz动态管理Scheduler,时间配置,页面+源 设置了多个 任务,本应该是各司其职的,任务调用多线程处理任务,but这个定时任务竟然同时跑了10次???如 ...

  8. 福州11911.562(薇)xiaojie:福州哪里有xiaomei

    福州哪里有小姐服务大保健[微信:11911.562倩儿小妹[福州叫小姐服务√o服务微信:11911.562倩儿小妹[福州叫小姐服务][十微信:11911.562倩儿小妹][福州叫小姐包夜服务][十微信 ...

  9. jmeter_04_常用取样器

    目录 常用取样器详解 http取样器 1.1 基本配置 1.2 高级配置 jdbc取样器 2.1 JDBC Connection Configuration 2.1.1 **Variable Name ...

  10. 如何使用 Gin 和 Gorm 搭建一个简单的 API 服务 （一）

    介绍   Go 语言最近十分火热,但对于新手来说,想立马上手全新的语法和各种各样的框架还是有点难度的.即使是基础学习也很有挺有挑战性.   在这篇文章中,我想用最少的代码写出一个可用的 API 服务. ...