点击图片, 预览大图
用于点击图片缩略图, 显示大图预览.
本插件仿照jQuery的imgbox实现类似效果. http://d.lanrentuku.com/down/js/tupian-933/
但jQuery的imbbox没有拖拽效果等一些定制化的需求. 于是, 自己动手, 写了这个 小插件. 功能简洁, 使用方便.
快速上手请参见: quick_start.html演示.
快速上手准备:
<link rel="stylesheet" href="css/imgbox-1.0.css"/> <script type="text/javascript" src="./js/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="js/imgbox-1.0.1.js"></script>
首先, 本插件会暴露一个全局实例: ImgBox.
//查看全局实例: ImgBox
console.log('查看全局ImgBox实例',ImgBox);
demo 1: 利用imgbox的定制属性large-src存放大图链接
点击小图, 即可浏览large-src中的大图.
HTML:
<img src="image/3793633099_4f9c3e08b3_m.jpg" large-src="image/3793633099_3e1e53e4ac_o.jpg" id="demo-1" style="width: 100px"/>
JavaScript:
/****demo-1****/ $('#demo-1').imgbox();
点击:
缩放&拖拽:
定制参数demo
HTML:
<body> <img src="image/hongluobo.png"/> <img src="image/san-luobo.png"/> <img src="image/tuzi-28792711.jpg"/> <img src="image/yigeluobo.jpg"/> <img src="image/yuanluobo.jpg"/> </body>
JavaScript:
$('img').each(function (index,img) { $(img).imgbox({ magnification:2, min:0.1, max:20, degree:index%2==0?0:90 //奇数索引时右旋90deg }); }) Feedback
Email: liuhejun108@163.com
Anthor: Nisu-Liu
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
