jquery.flip插件翻转效果

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

简单应用:

jquery.flip插件翻转效果

 

jquery.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>
jquery.flip插件翻转效果

 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插件翻转效果,布布扣,bubuko.com

jquery.flip插件翻转效果

上一篇:js对cookie的操作:读、写、删


下一篇:js基础知识