wdImageStax是一款效果非常酷的堆叠图片切换展示jQuery插件。该插件可以将一组图片进行堆叠,每张图片随机旋转不同的角度。当用户点击某张图片时,这张图片会被抽出放到堆叠图片的最后位置。
使用方法
该堆叠图片插件依赖于jQueryUI,使用时要引入相关的依赖文件。
<link href="css/wdImageStax.css" rel="stylesheet"> <script src="jquery/1.11.1/jquery.min.js"></script> <script src="jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="jquery.wdImageStax.min.js"></script>
HTML结构
该堆叠图片画廊的HTML结构使用一个<div>
作为包裹元素,里面放置一个无序列表,列表中每一项都是一张图片。
<div id="gallery-wrapper"> <ul> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> </ul> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过wdImageStax()
方法来初始化该堆叠图片插件。
$(document).ready(function() { $('#gallery-wrapper').wdImageStax({height:500}); //或者使用默认的参数 $('#gallery-wrapper').wdImageStax(); });
配置参数
下面是该堆叠图片插件的可用配置参数。
-
height
:堆叠图片画廊的高度,不用添加单位,默认值为false
。 -
width
:堆叠图片画廊的宽度,不用添加单位,默认值为false
。 -
list
:<ul>
元素的class名称。 -
centreImages
:是否将图片居中,默认值为false
。 -
index
:图片栈的z-index
值,默认值为1200。 -
degree
:图片旋转的最大角度,默认值为20。 -
degreePattern
:图片旋转的模式,可选值有:"default" 或 "random"。取值"default"时,每张图片会增加旋转相同的角度。 -
animateSpeed
:点击图片时洗牌(图片切换)的速度,单位毫秒,默认值为500。 -
swingTop
:图片向上动的高度,和图片的尺寸相关。默认值为0.4。(1表示100%图片高度) -
swingLeft
:图片向左移动的宽度,和图片的尺寸相关。默认值为0.6。(1表示100%图片高度) -
evaluateOnWindowResize
:是否在窗口尺寸改变时调整动画区域,默认值为true
。 -
wrapperStyles
:图片画廊的选择器/元素。默认值为空的{}
。 -
imageStyles
:每一张图片的样式。默认值为空的{}
。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!