首先去网站http://lab.smashup.it/flip/下载插件

简单应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>翻版</title>

</head>

<script type="text/javascript" src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery.flip.min.js"></script>

<script type="text/javascript">

         $(document).ready(function(){

                   $('#flipbox li').click(function()

                   {

                       $(this).flip(

                       {

                            direction:'rl',

                            content:'没中'

                       })

                       $('#flipbox li').unbind('click');

                   })

        });

    </script>

<style type="text/css">

.contentFirst{ width:100px; height: 100px; background: yellow;}

*{ margin:0; padding:0;}

li{ list-style:none;}

.box{ width:615px; margin:30px auto;}

.box ul li{float:left; width:200px; height:120px; background:#FF9900;font-size: 48px; text-align:center; line-height:120px; color:#fff; margin:0 3px 3px 0; cursor:pointer;}

</style>

<div class="box" id="flipbox">

        <ul>

          <li>1</li>

          <li>2</li>

          <li>3</li>

          <li>4</li>

          <li>5</li>

          <li>6</li>

        </ul>

    </div>

</body>

</html>

Flip 提供的全部属性有：

content
定义翻转后元素的新内容，可以是：文本 、 HTML 或 jQuery 对象

direction
定义元素翻转的方向，可选：tb 上到下    /bt 下到上   /lr 左到右    /rl 右到左 ，默认为 tb

color
定义元素翻转后的背景颜色，默认是 #999999 （从 Firebug 查看得知）

speed
定义翻转的速度，默认为 500 毫秒

onBefore
定义元素翻转之前的回调函数

onAnimation
定义元素翻转到一半时的回调函数

onEnd
定义元素翻转之后的回调函数

应用实例：

翻板中奖

http://www.helloweba.com/view-blog-184.html

jquery.flip插件翻转效果的更多相关文章

  1. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  2. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...

  3. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  4. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  5. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. MBB类似jquery.bxslider插件轮播效果

    首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...

  8. 批发网加盟页面轮播Jquery jcarousellite插件效果

    Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  9. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. 读Windows编程

    1.Windows是一个消息驱动系统.它通过把消息投入应用程序消息队列中或者把消息发送给合适的窗口消息处理程序,将发生的各种事件通知给应用程序 2.尽管一个动态链接库模块可能有其它扩展名(如.EXE或 ...

  2. JAVA类与对象（四）----成员变量与局部变量 、成员方法、构造方法

    类体中的变量分为两部分.变量定义部分定义的变量为类的成员变量,在方法体中定义的变量和方法中涉及的变量称为局部变量. 成员变量和局部变量的区别: (1).成员变量在整个类中都有效,局部变量只在定义它的方 ...

  3. objective-c自学总结（二）---init/set/get方法

    一:类的声明和实现: 声明:(放在“类名+.h”文件中). 类的声明主要有两部分组成:实例变量和方法. 例 #import <Foundation/Foundation.h> @inter ...

  4. android 系统应用在运行时被卸载

    android 系统应用在运行时被rm 掉了,是否还会运行? 环境:root,且开机运行 经过试验,apk本身是在 /system/app 目录下面,且apk已经运行了,这个时候直接 rm /syst ...

  5. Upgrading to Java 8——第三章 Optional and Similar Classes

    Java程序员对付空指针异常已经好多年了.在Java8中将有新的方式去处理他们.通过包装一个潜在的可能为null的类称为Optianal. 在Java8中添加了the Optional, Option ...

  6. 利用WiFi钓鱼法追邻居漂亮妹纸

    假设,你的邻居是一个妹纸.漂亮单身,你,技术狗,家穷人丑,集体户口.像借酱油这种老套搭讪方式的成功率对你来说实在很低. 你要做的是了解她,然后接近她.通过搜集更多的情报,为创造机会提供帮助. 初级情报 ...

  7. PowerDesigner(七)-数据库的生成和修改（转）

    数据库的生成和修改 使用ODBC接口连接数据库 访问数据库 预测数据库大小 生成数据库及数据库对象 PDM与用户数据库的同步 使用测试数据 暂不详述.

  8. 关于面向对象--oop

    这两天在做大数据方面的项目看到关于job作业调度的设计,扣了两天了,感触良多,记下来做个反省. 这是一个精简版的图,其中还有一些没有划到,其实到这里目前对我来说已经足够了. 看完图之后进行分析,我只抛 ...

  9. SOA之（5）——REST的SOA（SOA with REST）概念

    REST的SOA(SOA with REST)概念 发展 1992年网站(Web Sites)是在Web浏览器和Web服务器直接通过HTTP传输HTML. 2000年WS-* (Web Service ...

  10. NET 查找程序集路径（CLR关于Assembly的搜索路径的过程)

    最近在回顾.Net应用程序的执行环境,这里做一个很小的总结,方面以后需要的时候进行查找: CLR必须可以找到正确的Assembly,Net提供了Assembly搜索算法,可以根据.config文件(类 ...