首先去网站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. 升级ubuntu内核

    ubuntu12.04内核为 linux-image-3.5.0-23-generic 要升级为 linux-image-3.2.0-57-generic 使用apt-get install linu ...

  2. Ionic入门一：Hello Ionic

    1.在终端里面进入准备存放App的目录:  2.Ionic官网提供了三个项目模板blank.tabs和sideMenu ,用“ionic start myApp tabs”创建ionic项目:  ...

  3. SQL Server性能优化（1）使用SET函数

    在一切开始之前,先看下微软的建议:在系统的整体性能优化里面, TSQL优化优先级并不是最高的. 本文包括四部分: SET STATISTICS TIME ON SET STATISTICS IO SE ...

  4. PDO应用

    <?php //PDO:数据访问抽象层//dsn:数据源://带有事务功能:$dsn = "mysql:host=localhost;dbname=mydb";  ——建立数 ...

  5. openwrt的交叉编译

    默认情况下,openwrt编译脚本会自动从Internet上获取所需要的软件包源代码,并把下载的源码包存放在当前目录的 dl/ 目录中:  在 build_dir/ 目录中存放编译中使用的软件包,   ...

  6. bzoj 1024 暴力深搜

    我们直接暴力的深搜怎么切就行了, 每一刀切的方案只有横着和竖着,横竖又分在几等分点切, 因为要保证每个人的面积相同,所以比较好处理了,第几个几等分点就 分给这边几刀. /*************** ...

  7. 【BZOJ】【4010】【HNOI2015】菜肴制作

    拓扑排序 这题是要求N个点的一个拓扑序,且满足以下条件:编号1的位置尽可能靠前,在此基础上编号2的位置尽可能靠前…… 我看到这题的第一感觉:将拓扑排序用的队列改为优先队列,编号越小越早出来. 但是连样 ...

  8. Leetcode#152 Maximum Product Subarray

    原题地址 简单动态规划,跟最大子串和类似. 一维状态空间可以经过压缩变成常数空间. 代码: int maxProduct(int A[], int n) { ) ; ]; ]; ]; ; i > ...

  9. HTTP1.1缓存策略

    以下是一幅虽然信息包含量有限.但足够以最简洁的方式说明了“什么是HTTP1.1缓存策略”的图  缓存和缓存策略 web缓存(web cache)或代理缓存(proxy cache)是一种特殊的HTTP ...

  10. yebis error ---depth of field

    前几天在墙外无法登陆cnblogs...导致很多blogs就没写了 有几篇比较值得记下来的,但是我已经不记得了,应该和sao有关scalable ambient obscurance 我似乎回忆起一点 ...