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时间验证和转换工具小例子
Jul 01 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
js代码实现轮播图
May 04 Javascript
js实现简单音乐播放器
Jun 30 Javascript
异步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
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
微信小程序自定义组件
2017/08/16 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
销售类个人求职信范文
2013/09/25 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
《绝招》教学反思
2016/02/20 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python