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 滚轮事件使用说明
Mar 07 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
详解js的视频和音频采集
Aug 09 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
vue实现井字棋游戏
Sep 29 Javascript
javascript实现前端分页功能
Nov 26 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命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
python发送伪造的arp请求
2014/01/09 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python调用百度语音REST API
2018/08/30 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python的Jenkins接口调用方式
2020/05/12 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
高校教师岗位职责
2014/03/18 职场文书
国窖1573广告词
2014/03/21 职场文书
规范化管理年活动总结
2014/08/29 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
影视后期实训报告
2014/11/05 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
LeetCode189轮转数组python示例
2022/08/05 Python