jquery.flip插件翻转效果
首先去网站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
定义元素翻转之后的回调函数
应用实例:
翻板中奖
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。