zooming.js菜鸟教程一款纯Js智能缩放图片预览插件

zooming.js基础入门

官方网址:https://desmonding.me/zooming/

zooming.js菜鸟教程一款纯Js智能缩放图片预览插件

GitHub:https://github.com/kingdido999/zooming

简介描述:一款纯Js智能缩放图片预览插件

zooming.js是一款纯JavaScript智能缩放图片预览插件。该图片缩放预览插件无任何外部依赖,使用纯Js来实现,它可以在点击页面中的缩略图之后,切换到高清大图来显示。  

zooming.js使用

1、安装或引入

npm install zooming --save

<script src="zooming.js"></script>

2、html

<img src="img/sample.jpg" data-action="zoom" />

只需要在需要进行缩放的图片上添加data-action=”zoom”属性即可,或者使用data-original属性来使放大的图片指向高清大图:

<img src="img/thumbnail.jpg" data-action="zoom" data-original="img/original.jpg" />

海计划公众号
(0)
上一篇 2020/03/05 11:20
下一篇 2020/03/05 11:20

您可能感兴趣的内容

  • 在vue项目中,如何定义全局变量/全局函数?菜鸟教程_函数入门知识

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数定义全局变量原理:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在

    2020/03/29
  • 懒加载形式,为什么需要懒加载?指南教程_加载基础入门

    懒加载
    按需加载,即一种在页面加载时延迟加载一些非关键资源的技术。
    作为网页内容的一部分图像和影像通常需要消耗很多资源加载。在网页优化的过程中,需要避免资源浪费在加载图片和视频上。这时候就需要用到懒加载,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。
    懒加载形式浏览网站时准备往下拖动滚动条
    拖动图片到视窗
    占位图片被替换成最终图片为什么需要懒加

    2020/03/23
  • vue-router动态路由设置参数可选入门攻略_参数使用攻略

    在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面传page和id,根据page不同,显示不同的页面 问题使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面new Router({routes:

    2020/03/26
  • TheBestDesigns小白指南_最佳网页设计展示网

    TheBestDesigns小白指南 官方网址:https://www.thebestdesigns.com/ 简介描述:最佳网页设计展示网 TheBestDesigns:最佳网页…

    2020/03/11
  • 当我们git merge的时候到底在merge什么?指南教程_git指南攻略

    序言我在上大学的时候并没有接触过VCS(版本控制系统)。虽然曾经在Google Code发布过去项目,但是以压缩包的形式发布的;与室友合作开发计算机网络这门课的课程设计时,也没有用上。直到入职第一家公司后才真正开始使用,当时用的是Git,此后也始终没用过其它的VCS——SVN仅仅耳闻未曾使用——转眼间已经用了六年多的Git了。尽管日常使用问题不大,但对于Gi

    2020/03/23
  • 面向对象的反思入门百科_面向对象入门基础知识

    面向对象的反思入门百科 缘起 上周修改一个Bug,本来以为只需要做一些小调整就可以,后来还是发现由于受对象间的状态影响,出现了另一个错误。这也让我进一步思考对于系统设计和建模来说:…

    2020/03/19
  • vue-qr生成下载二维码小白帮助_二维码零基础入门

    安装vue-qrnpm install vue-qr –save生成二维码实列<vue-qr ref="Qrcode" :text="qrCodeConfig.text" :download="downloadFilename" :margin="10" :size="200" :dotScale="qrCodeConfig.dotScale" :col

    2020/03/29
  • Fluidbox.js小白教程_响应式的 jQuery Lightbox 插件

    Fluidbox.js小白教程 官方网址:http://terrymun.github.io/Fluidbox/ GitHub:https://github.com/terrymu…

    2020/03/06
  • SSL证书对企业网站的优势小白常识_网站小白指南

    目前网站使用最多的是HTTP协议,用于从www服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。但它有一个很大的缺点:传输过程中的所有信息和数据都是明文的,在网络中传输极易被截取或篡改,非常不安全。不过从2018年开始,这一情况将会发生转变。今年10月开始,对于那些通过HTTP访问的网站,Google会在其浏览器中显示一个明显的

    2020/03/26
  • Blend4Web基础教程用于创建交互式3D网络体验WebGL的框架

    Blend4Web基础入门 官方网址:https://www.blend4web.com/en/ GitHub:https://github.com/TriumphLLC/Blen…

    2020/03/05
  • Vue中jsx的最简单用法指南攻略_jsx指南攻略

    什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.我为什么要在vue中用JSX?最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,Vue

    2020/03/29
  • Js判断变量的数据类型基础入门_类型基础入门

    Object.prototype.toString.call()判断变量类型的所有方法中,该方法可以说是判断的最完全的方法,所有的数据类型都可以判断,在使用Object.prototype.toString.call()方法判断变量类型时,需要判断的变量会放在小括号内var str = “abc”;
    Object.prototype.toString.cal

    2020/03/22
  • nodejs核心模块有哪些?使用指南_模块基础入门

    nodejs核心模块有哪些?使用指南 核心模块是 Node.js的心脏,它由一些精简而高效的库组成,为 Node.js 提供了基本的API。下面本篇文章就来给大家介绍一部分最常用的…

    2020/03/20
  • HTTP返回415请求错误Unsupported Media Type:415表示服务器无法处理请求附带的媒体格式小白攻略_服务器基础知识教程

    前端在调用外部API接口时返回Http是415的请求错误,这是415返回码是由于:服务器无法处理请求附带的媒体格式。通常解决方法有以下3种:1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝请求了;比如你写的的爬虫,就很有可能因为没有伪装成浏览器,被拒绝请求2:查看你的 http 请求方法,以及服务器端的设置,比如:有一

    2020/04/05
  • 高级程序员与初级程序员差别在哪里?使用攻略_程序员指南攻略

    初级工程师和高级工程师差距不仅仅是代码质量上,而且其他能力上,解决问题的能力,抽象问题的能力!详细的跟大家谈谈我所遇到的、见到的厉害的程序员,同样是写业务代码,为什么会比初级程序员拿的工资高?初级多在写代码,高级多在设计代码一般人可能拿到需求,就开始写代码了,写着写着由于页面功能越来越多,感觉代码越来越复杂,自己都会觉得难以维护了。我拿我自己举个例子,之前有

    2020/03/29
  • 常用的CSS命名规则基础教程_命名小白常识

    应该很多人都会有PO这种东西,但是对刚学CSS的人真的很重要,尤其像我这种英文不好的人,这些是必背的的单字喔^^,这些数据只是我在学习的时候,参考别人的数据之后用自己的思考整理出来的,像参考书写的真的都看不懂,通常翻第一页之后,永远就不会再翻第二页了,当然我也是搂…..一、常用的CSS命名规则头:header内容:content导览:nav侧栏:side

    2020/03/24