您的位置：首页 > 其它

PageSwitch插件实现100种不同图片切换效果

2015-07-28 15:58 721 查看

pageSwitch插件实现100种不同图片切换效果，此插件适应于全屏切换场景，并且实现了一百种切换效果，支持自定义切换页动画。效果如下图所示：

实现的代码。

html代码：

<div id="wrap">
<div id="imgs">
<div><img src="images/1.jpg" /></div>
<div><img src="images/2.jpg" /></div>
<div><img src="images/3.jpg" /></div>
<div><img src="images/4.jpg" /></div>
<div><img src="images/5.jpg" /></div>
<div><img src="images/6.jpg" /></div>
<div><img src="images/7.jpg" /></div>
<div><img src="images/8.jpg" /></div>
<div><img src="images/9.png" /></div>
</div>
<div id="navs"><a href="javascript:;" class="active"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div>
<select id="tssel">
<option value="">选择切页效果</option>
<option value="fade">fade</option>
<optgroup label="滚动效果">
<option value="scroll">scroll</option>
<option value="scroll3d">scroll3d</option>
<option value="scrollCover">scrollCover</option>
<option value="scrollCoverReverse">scrollCoverReverse</option>
<option value="scrollCoverIn">scrollCoverIn</option>
<option value="scrollCoverOut">scrollCoverOut</option>
<option value="scrollX">scrollX</option>
<option value="scroll3dX">scroll3dX</option>
<option value="scrollCoverX">scrollCoverX</option>
<option value="scrollCoverReverseX">scrollCoverReverseX</option>
<option value="scrollCoverInX">scrollCoverInX</option>
<option value="scrollCoverOutX">scrollCoverOutX</option>
<option value="scrollY">scrollY</option>
<option value="scroll3dY">scroll3dY</option>
<option value="scrollCoverY">scrollCoverY</option>
<option value="scrollCoverReverseY">scrollCoverReverseY</option>
<option value="scrollCoverInY">scrollCoverInY</option>
<option value="scrollCoverOutY">scrollCoverOutY</option>
</optgroup>
<optgroup label="滑动效果">
<option value="slide">slide</option>
<option value="slideCover">slideCover</option>
<option value="slideCoverReverse">slideCoverReverse</option>
<option value="slideCoverIn">slideCoverIn</option>
<option value="slideCoverOut">slideCoverOut</option>
<option value="slideX">slideX</option>
<option value="slideCoverX">slideCoverX</option>
<option value="slideCoverReverseX">slideCoverReverseX</option>
<option value="slideCoverInX">slideCoverInX</option>
<option value="slideCoverOutX">slideCoverOutX</option>
<option value="slideY">slideY</option>
<option value="slideCoverY">slideCoverY</option>
<option value="slideCoverReverseY">slideCoverReverseY</option>
<option value="slideCoverInY">slideCoverInY</option>
<option value="slideCoverOutY">slideCoverOutY</option>
</optgroup>
<optgroup label="裁切效果">
<option value="slice">slice</option>
<option value="sliceX">sliceX</option>
<option value="sliceY">sliceY</option>
</optgroup>
<optgroup label="缩放效果">
<option value="zoom">zoom</option>
<option value="zoomCover">zoomCover</option>
<option value="zoomCoverReverse">zoomCoverReverse</option>
<option value="zoomCoverIn">zoomCoverIn</option>
<option value="zoomCoverOut">zoomCoverOut</option>
<option value="zoomX">zoomX</option>
<option value="zoomCoverX">zoomCoverX</option>
<option value="zoomCoverReverseX">zoomCoverReverseX</option>
<option value="zoomCoverInX">zoomCoverInX</option>
<option value="zoomCoverOutX">zoomCoverOutX</option>
<option value="zoomY">zoomY</option>
<option value="zoomCoverY">zoomCoverY</option>
<option value="zoomCoverReverseY">zoomCoverReverseY</option>
<option value="zoomCoverInY">zoomCoverInY</option>
<option value="zoomCoverOutY">zoomCoverOutY</option>
</optgroup>
<optgroup label="扭曲效果">
<option value="skew">skew</option>
<option value="skewCover">skewCover</option>
<option value="skewCoverReverse">skewCoverReverse</option>
<option value="skewCoverIn">skewCoverIn</option>
<option value="skewCoverOut">skewCoverOut</option>
<option value="skew">skewX</option>
<option value="skewCoverX">skewCoverX</option>
<option value="skewCoverReverseX">skewCoverReverseX</option>
<option value="skewCoverInX">skewCoverInX</option>
<option value="skewCoverOutX">skewCoverOutX</option>
<option value="skewY">skewY</option>
<option value="skewCoverY">skewCoverY</option>
<option value="skewCoverReverseY">skewCoverReverseY</option>
<option value="skewCoverInY">skewCoverInY</option>
<option value="skewCoverOutY">skewCoverOutY</option>
</optgroup>
<optgroup label="翻转效果">
<option value="flip">flip</option>
<option value="flip3d">flip3d</option>
<option value="flipClock">flipClock</option>
<option value="flipPaper">flipPaper</option>
<option value="flipCover">flipCover</option>
<option value="flipCoverReverse">flipCoverReverse</option>
<option value="flipCoverIn">flipCoverIn</option>
<option value="flipCoverOut">flipCoverOut</option>
<option value="flipX">flipX</option>
<option value="flip3dX">flip3dX</option>
<option value="flipClockX">flipClockX</option>
<option value="flipPaperX">flipPaperX</option>
<option value="flipCoverX">flipCoverX</option>
<option value="flipCoverReverseX">flipCoverReverseX</option>
<option value="flipCoverInX">flipCoverInX</option>
<option value="flipCoverOutX">flipCoverOutX</option>
<option value="flipY">flipY</option>
<option value="flip3dY">flip3dY</option>
<option value="flipClockY">flipClockY</option>
<option value="flipPaperY">flipPaperY</option>
<option value="flipCoverY">flipCoverY</option>
<option value="flipCoverReverseY">flipCoverReverseY</option>
<option value="flipCoverInY">flipCoverInY</option>
<option value="flipCoverOutY">flipCoverOutY</option>
</optgroup>
<optgroup label="爆炸效果">
<option value="bomb">bomb</option>
<option value="bombCover">bombCover</option>
<option value="bombCoverReverse">bombCoverReverse</option>
<option value="bombCoverIn">bombCoverIn</option>
<option value="bombCoverOut">bombCoverOut</option>
<option value="bombX">bombX</option>
<option value="bombCoverX">bombCoverX</option>
<option value="bombCoverReverseX">bombCoverReverseX</option>
<option value="bombCoverInX">bombCoverInX</option>
<option value="bombCoverOutX">bombCoverOutX</option>
<option value="bombY">bombY</option>
<option value="bombCoverY">bombCoverY</option>
<option value="bombCoverReverseY">bombCoverReverseY</option>
<option value="bombCoverInY">bombCoverInY</option>
<option value="bombCoverOutY">bombCoverOutY</option>
</optgroup>
</select>
</div>

以上就是本文的全部内容，希望大家喜欢。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  pageswitch 图片切换
相关文章推荐
新的分享
章节导航