分享100种不同图片切换效果插件pageSwitch。这是一款适用于全屏切换场景，即一切一屏，并且实现了超过一百种切换效果，支持自定义切页动画。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div id="wrap">

    <div id="imgs">

        <div><img src="data:images/1.jpg" /></div>

        <div><img src="data:images/2.jpg" /></div>

        <div><img src="data:images/3.jpg" /></div>

        <div><img src="data:images/4.jpg" /></div>

        <div><img src="data:images/5.jpg" /></div>

        <div><img src="data:images/6.jpg" /></div>

        <div><img src="data:images/7.jpg" /></div>

        <div><img src="data:images/8.jpg" /></div>

        <div><img src="data: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>

via:http://www.w2bc.com/article/52209

100种不同图片切换效果插件pageSwitch的更多相关文章

  1. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  2. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  3. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jquery另外一种类似tab切换效果

    简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...

  6. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  7. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

  8. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  9. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

随机推荐

  1. Jackson ObjectMapper readValue过程

    1.整体调用栈 2.看一下调用栈的两个方法 resolve 方法中通过 Iterator i$ = this._beanProperties.iterator() 遍历属性的所有子属性,缓存对应的 d ...

  2. VS Code编辑器插件整理及配置设定

    语言包: Chinese -- VS Code的汉化包 格式化+代码补全: ESLint -- Integrates ESLint Vetur -- A vue tooling Prettier -- ...

  3. Nowcoder 提高 Day1

    比赛链接 A 中位数(前缀和 二分) 额,确实没想到逼近... 然后写了n^2log的暴力,还CE了 只需要判断是否能有大于当前mid的中位数就好 这显然是可以二分的 代码 #include<b ...

  4. 潭州课堂25班：Ph201805201 第五课：格式化输出和深浅复制 (课堂笔记)

    格式化输出和字符串转义 占位符 使用示意 作用 %s '%s %s' % ('hello', 'world') 表示占位的是str %d '%d %d' % (1, 2) 表示占位的是int %d ' ...

  5. adblock 下载地址

    addblock 的作用: 防止追踪.恶意域名,过滤横幅广告.弹窗广告以及视频广告.   用以支持网站的非侵入式广告将不会被屏蔽 下载地址:https://pan.baidu.com/share/li ...

  6. PHPMailer 使用方法（支持群发）：

    一.下载函数包 地址:https://github.com/PHPMailer/PHPMailer 二.测试服务器环境 通过phpinfo()函数打印出是否支持Sockets(Socket属于php的 ...

  7. 【3dsmax2016】安装图文教程、破解注册以及切换语言方法

    第一步:安装3dsmax2014 64位中文版 第二步:解压3dsmax2014 64位中文版安装包 第三步:选择安装产品 第四步:接受相关协议 第五步:产品序列号和密钥 第六步:产品子组件选择 第七 ...

  8. 基于Python的SQLAlchemy的操作

    安装 在Python使用SQLAlchemy的首要前提是安装相应的模块,当然作为python的优势,可以到python安装目录下的scripts下,同时按住shift+加上鼠标左键,从而在菜单中打开命 ...

  9. 让.Net程序支持命令行启动

    很多时候,我们需要让程序支持命令行启动,这个时候则需要一个命令行解析器,由于.Net BCL并没有内置命令行解析库,因此需要我们自己实现一个.对于简单的参数来说,自己写一个字符串比较函数来分析args ...

  10. 状态压缩+矩阵乘法hdu-4332-Constructing Chimney

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4332 题目意思: 用1*1*2的长方体构造一个中间为空的底面3*3的立体烟囱. 解题思路: 实际上就 ...