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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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使用JSON和将json还原成数组
2015/02/12 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python类的继承实例详解
2017/03/30 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python 切换root 执行命令的方法
2019/01/19 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
如何学习Python time模块
2020/06/03 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
高中政治教学反思
2014/01/18 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
项目投资意向书
2014/04/01 职场文书
高一学生评语大全
2014/04/25 职场文书
职工小家建设活动方案
2014/08/25 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
安全温馨提示语大全
2015/07/14 职场文书
golang slice元素去重操作
2021/04/30 Golang
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android