最近整理了以前写过的一个jquery插件,该插件主要功能实现相似于相册的功能,在图片网站上很常见。也有一些比较流行的图片预览组件好比fancybox。
可是fancybox依然有它没法解决的问题,好比它不支持缩放,只能弹出一个通过它计算后以为合适的固定宽高图片。还有另一个痛点,我找了一个能够缩放的组件,可是当我大图加载出来的时候,图片不是从头开始显示的,而是从图片中间开始。这对用户体验来讲有点糟糕,我须要把图片从新拖到顶部再来欣赏图片。另外个人平台为设计师服务,绝大部多数图片都是手机上的长图或者pc上拼接起来的设计稿。所以,我决定本身写一个组件,解决这两个问题。
zoomimg基于以上的背景产生了,它解决问题:javascript
github地址:https://github.com/jacoobwang/zoomImg
(你们若是以为还能够,但愿能够给个star)
html
Gif演示,因为压缩缘由,质量受到必定影响java
使用方法:jquery
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="zoom-img.min.js" ></script> <script type="text/javascript"> $('#gallery .zoom').zoomImg(); //懒人版 //-----------分界线--------------------- $('#gallery .zoom').zoomImg({ 'color' : '#000', //背景颜色 'opacity': 0.5, //背景透明度 'loading': 'img/loading001.gif' //loading图片 }); </script>