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 相关文章推荐
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JS前端笔试题分析
Dec 19 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
分享PHP入门的学习方法
2007/01/02 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python练习程序批量修改文件名
2014/01/16 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
学习python分支结构
2019/05/17 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python PyQt5整理介绍
2020/04/01 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
商超业务员岗位职责
2014/03/12 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
学习雷锋主题班会
2015/08/14 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers