首先去网站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. c++函数内部声明函数，在函数外面实现函数是可以的

    这个具体有什么用我也不大清楚,只知道可以这样 #include <iostream> //#include "header1.h" using namespace st ...

  2. 主元分析PCA理论分析及应用

    首先,必须说明的是,这篇文章是完完全全复制百度文库当中的一篇文章.本人之前对PCA比较好奇,在看到这篇文章之后发现其对PCA的描述非常详细,因此迫不及待要跟大家分享一下,希望同样对PCA比较困惑的朋友 ...

  3. 向Array中添加堆排序

    堆排序思路 堆排序是一种树形选择排序方法(注意下标是从1开始的,也就是R[1...n]). 1) 初始堆: 将原始数组调整成大根堆的方法——筛选算法:比较R[2i].R[2i+1]和R[i],将最大者 ...

  4. 【Merge Two Sorted Lists】cpp

    题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...

  5. Spring Mvc 输出Json(iwantmoon.com出品)

    原文:http://iwantmoon.com/Post/f94e49caf9b6455db7158474bab4c4dd 因为工作需要,现在要去做开放平台,考虑了多种方案之后,基本确定 下来,Htt ...

  6. django构建blog--页面部分（eclipse+pydev）

    本文介绍的是在eclipse+pydev 平台下,利用django 搭建blog的第2部分:页面部分(主要涉及3个部分:模板.视图.URL模式) 篇幅1:创建模板 blog目录下新建一个文件夹:tem ...

  7. selenium--下拉列表选择

    html 代码: <select name="ColumnId" id="columnOrd"> <option value="2& ...

  8. 【BZOJ】【1069】【SCOI2007】最大土地面积

    计算几何/旋转卡壳 从已知点中选出四个使得选出的四边形面积最大,很明显我们应该在凸包上搞. 我一开始的思路是:枚举 i ,找到 i 的对锺点cur1,这两个点将凸包分成了两半,我们在左半中枚举一个 j ...

  9. bzoj 1041 圆上的整点 分类： Brush Mode 2014-11-11 20:15 80人阅读 评论(0) 收藏

    这里先只考虑x,y都大于0的情况 如果x^2+y^2=r^2,则(r-x)(r+x)=y*y 令d=gcd(r-x,r+x),r-x=d*u^2,r+x=d*v^2,显然有gcd(u,v)=1且u&l ...

  10. NYOJ-102 次方求模 AC 分类： NYOJ 2014-02-06 18:53 184人阅读 评论(0) 收藏

    地址:http://acm.nyist.net/JudgeOnline/problem.php?pid=102 //a^b mod c=(a mod c)^b mod c很容易设计出一个基于二分的递归 ...