js插件---放大镜如何使用

一、总结

一句话总结：一张高清图片被用了两次，一次做缩略图，一次做放大后显示用的的图片（其实这个图片就是高清图片本身，而且是部分）

14     <figure class="am-magnifier">

15       <img width="300" height="300" src="amazeui-magnifier-master/docs/images/bing-square.jpg" alt="Bing square image" data-am-magnify>

16       <div data-am-shape="square"></div>

17       <div class="am-margin-left-sm">

18         <img width="900" height="900" src="amazeui-magnifier-master/docs/images/bing-square.jpg" alt="Bing square image">

19       </div>

20     </figure>

1、引入插件的注意事项？

必须注意插件依赖的js和css
必须同时引进插件本身的js和css
插件下载下来的包里面一般都会有demo，照着demo用

二、js插件---放大镜

1、截图

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="../css/amazeui.min.css">

     <script src="../js/jquery.min.js"></script>

     <script src="../js/amazeui.min.js"></script>

     <!-- 插件对应的js和css -->

     <link rel="stylesheet" href="amazeui-magnifier-master/dist/amazeui.magnifier.min.css">

     <script src="amazeui-magnifier-master/dist/amazeui.magnifier.min.js"></script>

 </head>

 <body>

     <figure class="am-magnifier">

       <img width="300" height="300" src="amazeui-magnifier-master/docs/images/bing-square.jpg" alt="Bing square image" data-am-magnify>

       <div data-am-shape="square"></div>

       <div class="am-margin-left-sm">

         <img width="900" height="900" src="amazeui-magnifier-master/docs/images/bing-square.jpg" alt="Bing square image">

       </div>

     </figure>

 </body>

 </html>

amazeui框架插件库插件库地址：Amazeui Plugins
http://plugins.amazeui.org/magnifier.html#project=amazeui-magnifier&author=photino

 

js插件---放大镜如何使用的更多相关文章

  1. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  2. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  3. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  4. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  5. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  6. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  7. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  8. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  9. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

随机推荐

  1. 中断API之enable_irq

    void enable_irq(unsigned int irq) 用于使能一个irq. void disable_irq(unsigned int irq)则用于禁止一个irq 其使用的例程如下: ...

  2. 【Henu ACM Round#19 A】 Vasya the Hipster

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题. 两个一起用->min(a,b); 剩下的除2加上去就好 [代码] #include <bits/stdc++. ...

  3. 【Round #36 (Div. 2 only) C】Socks Pairs

    [题目链接]:https://csacademy.com/contest/round-36/task/socks-pairs/ [题意] 给你n种颜色的袜子,每种颜色颜色的袜子有ai只; 假设你在取袜 ...

  4. Java中发送http的get、post请求

    近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...

  5. 线程池系列三：ThreadPoolExecutor讲解

    三.一个用队列处理线程池例子 package demo; import java.util.Queue; import java.util.concurrent.ArrayBlockingQueue; ...

  6. BZOJ 3940 AC自动机

    思路: 需要维护一个栈的AC自动机--. 要求出来 最后的栈顶是在自动机上的哪个节点. if(!ac.ch[st[tp-1]][a[i]-'a']) st[tp]=ac.ch[ac.f[st[tp-1 ...

  7. Android自定义组件系列【14】——Android5.0按钮波纹效果实现

    今天任老师发表了一篇关于Android5.0中按钮按下的波纹效果实现<Android L中水波纹点击效果的实现>,出于好奇我下载了源代码看了一下效果,正好手边有一个Nexus手机,我结合实 ...

  8. Vuejs2.0构建一个彩票查询WebAPP(1)

    说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...

  9. tensorflow学习之路-----卷积神经网络个人总结

    卷积神经网络大总结(个人理解) 神经网络 1.概念:从功能他们模仿真实数据 2.结构:输入层.隐藏层.输出层.其中隐藏层要有的参数:权重.偏置.激励函数.过拟合 3.功能:能通过模仿,从而学到事件 其 ...

  10. Hexo High一下以及压缩排版问题

    背景介绍 集成Hight一下以及Gulp-html压缩之后出现的问题: High一下功能多次点击,会创建多个Audio对象,导致同时播放多次音乐,重音.解决办法:判断是否添加Audio对象,如果存在则 ...