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


Posted in Javascript onJuly 28, 2015

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

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>

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

Javascript 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
异步JavaScript编程中的Promise使用方法
Jul 28 #Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 #Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 #Javascript
JavaScript编程中的Promise使用大全
Jul 28 #Javascript
javascript+html5实现绘制圆环的方法
Jul 28 #Javascript
学习Bootstrap组件之下拉菜单
Jul 28 #Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 #Javascript
You might like
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
收音机的保养
2021/03/01 无线电
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python切片索引用法示例
2018/05/15 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
pandas数据拼接的实现示例
2020/04/16 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Python 可视化神器Plotly详解
2020/12/26 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
创意活动策划书
2014/01/15 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
文明单位申报材料
2014/12/23 职场文书
小学班主任心得体会
2016/01/07 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript