首先去网站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. [LAMP]【转载】——PHP7.0的安装

    ***原文链接:http://my.oschina.net/sallency/blog/541287 php编译过程报错解决可参考:http://www.cnblogs.com/z-ping/arch ...

  2. python 通过urllib模块在svn中下载文件

    #_*_coding:utf-8_*_ import urllib def Schedule(a,b,c): ''' a:已经下载的数据块 b:数据块的大小 c:远程文件的大小 ''' per = 1 ...

  3. Android -- Layout布局文件里的android:layout_height等属性为什么会不起作用？

    有的时候,我们配置好的布局文件,在加载完成添加到我们的Activity中后发现,并没有安装我们设置的属性来布局,比如我们设置了android:layout_marginTop="100dip ...

  4. 关于BaseAdapter的使用及优化心得（一）

    对于Android程序员来说,BaseAdapter肯定不会陌生,灵活而优雅是BaseAdapter最大的特点.开发者可以通过构造BaseAdapter并搭载到ListView或者GridView这类 ...

  5. Careercup - Microsoft面试题 - 5718181884723200

    2014-05-11 05:55 题目链接 原题: difference between thread and process. 题目:请描述进程和线程的区别. 解法:操作系统理论题.标准答案在恐龙书 ...

  6. android 下载图片出现SkImageDecoder::Factory returned null，BitmapFactory.Options压缩

    网上有很多说是因为没有采用HttpClient造成的,尼玛,我改成了HttpClient 请求图片之后还是会出现SkImageDecoder::Factory returned null, 但是直接使 ...

  7. Codeforces Round #265 (Div. 1) C. Substitutes in Number dp

    题目链接: http://codeforces.com/contest/464/problem/C J. Substitutes in Number time limit per test 1 sec ...

  8. Ionic 安装部署

    Ionic 安装部署 准备工作 下载安装Node.js, JDK,Apache Ant,Android SDK:编辑器用WebStorm node jdk ant 均需要加进 环境变量path中 An ...

  9. 【Tsinsen】【A1365】森林旅店

    KD-Tree 啊哈~检验了一下自己KD-Tree的学习情况,还算可以,模板至少是记下来了. 支持插入(所以要带重建),查询最近的P个点的距离. 然而题目并没有说是按怎样的顺序输出这P个点?...(事 ...

  10. 打印xls注意事项

    1.ctrl+p 2.打印机选择 就绪的,不是脱机的,不要只看打印机的名字. 3.打印名单信息的话 要用横向打印 4.从数据库里导出来的数据xls可能在excel里没显示完全,比如学号.身份证号等(e ...