微信扫一扫打赏支持

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

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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="../css/amazeui.min.css">
 7     <script src="../js/jquery.min.js"></script>
 8     <script src="../js/amazeui.min.js"></script>
 9     <!-- 插件对应的js和css -->
10     <link rel="stylesheet" href="amazeui-magnifier-master/dist/amazeui.magnifier.min.css">
11     <script src="amazeui-magnifier-master/dist/amazeui.magnifier.min.js"></script>
12 </head>
13 <body>
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>
21 </body>
22 </html>

 

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

 

 

 

 
posted @ 2018-08-25 16:56  范仁义  阅读(290)  评论(0)  编辑  收藏  举报