基于jQuery的图片展示特效插件

基于jQuery的图片展示特效插件

imgZoomAndRotate是一款基于jQuery的图片展示插件。该图片展示插件支持图片循环切换,缩放,旋转,拖拽。

使用方法
在页面中引入jquery、jquery.mousewheel.js、jquery.drag.js和imgZoomAndRotate.js文件。

1
2
3
4
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.drag.js"></script>
<script src="js/imgZoomAndRotate.js" ></script>

HTML结构
可以通过下面的方法来在页面构建一组图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
  <div>
    <span href="##" id="#">
      <img src="img/01.jpg" class='zoomImgs'>
    </span>
    <img src="img/02.jpg" class='zoomImgs'>
  </div>
  <img src="img/03.jpg" class='zoomImgs'>
</div>
<p>
  <img src="img/04.jpg" class='zoomImgs'>
  <img src="img/05.jpg" class='zoomImgs'>
</p>
<div>
  <img src="img/06.png" class="zoomImgs">
</div>

初始化插件
在页面DOM元素加载完毕之后,通过imgZoomAndRotate()方法来初始化该插件。

1
$('.zoomImgs').imgZoomAndRotate({'loop':true})
  • 支持在iframe下全屏展示和操作图片;
  • 添加上一张,下一张,左旋,右旋,和关闭图片按钮的功能;
  • 添加十字键盘切换图片和进行缩放;
  • 支持图片元素在dom不同的层级下同时进行绑定;
  • 缩放(原有功能)
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论