首先去网站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. iTween基础之iTweenPath(自定义路径移动)

    在游戏开发中经常会用到让一个游戏对象按照指定的路线移动,iTweenPath就提供了可视化的编辑路径功能. iTweenPath 下载地址: http://download.csdn.net/deta ...

  2. 容器适配器之priority_queue

    template <class T, class Container = vector<T>,                class Compare = less<type ...

  3. 任务：写一个tomcat自启动脚本

    写一篇<gitlab无法启动了应该怎么办>

  4. Bootstrap入门二：响应式页面布局

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  5. hibernate.cfg.xml 配置（摘录）

    配置文件中映射元素详解 对象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素,映射文件的 ...

  6. angularjs源码分析之：angularjs执行流程

    angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...

  7. Codeforces Round #131 (Div. 1) B. Numbers dp

    题目链接: http://codeforces.com/problemset/problem/213/B B. Numbers time limit per test 2 secondsmemory ...

  8. lle算法

    http://www.pami.sjtu.edu.cn/people/xzj/introducelle.htm

  9. 跨平台base64数据传输注意问题

    今天用base64编码传输json串,android端那边始终看不到图片! 首先发现android端接收的json串长度不一致,仔细研究发现android端接收到的json数据里把服务器数据里的&qu ...

  10. shader 的 nounroll

    刚刚解决了一个特别坑的问题. 客户有个需求 需要shader里面 loop 的iterator数量 在运行时确定.z 这样对于里面存在  sample的loop就会被force unroll但因为co ...