jQuery刮彩票兑奖效果，很有意思的代码，用鼠标拖动灰度条向右滑开，可看到中奖信息，还有一种效果是，完全撕开查看中奖结果，这功能酷吧，不过有些遗憾，IE6不兼容本效果，请使用IE8或火狐、Chrome等浏览器。

点击(此处)折叠或打开

<!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>
<title>jQuery刮彩票兑奖效果</title>
<meta http-equiv=\"content-type\" content=\"text/html;charset=gb2312\">
<style type=\"text/css\">
#layout{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
#layout div{position:absolute;top:0px;left:0px;width:100%;height:20px;background:#ccc;}
#layout2{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
#layout2 div{position:absolute;top:0px;right:0px;width:100%;height:20px;background:#ccc;}
</style>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script>
<script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(document).ready(function() {
$(\"#layout div\").draggable({
revert:function() {
var a = $(\"#layout div\").offset().left;
var b = $(\"#layout\").width();
if (a >= b) {
$(\"#layout\").text(\"恭喜您获得5000万美元大奖！\").css(\"color\",\"red\").fadeOut(200).fadeIn(500);
return false;
}else{
return true;
}
},
axis: \"x\", snap: \"#layout\", scroll: false}
);
$(\"#layout2 div\").click(function() {
$(this).animate({
width : \"+=20\",
}).animate({
width : \"-=50\",
});
if ($(this).width() <= 30) {
$(\"#layout2\").text(\"恭喜您获得5000万美元大奖！\").css(\"color\",\"red\").fadeOut(200).fadeIn(500);
}
});
});
</script>
</head>
<body>
<div>说明：不支持IE6！</div>
<p> </p>
<p>效果一（拖拽灰条）：</p>
<div id=\"layout\">
<div></div>
请完全撕开查看中奖结果。
</div>
<p> </p>
<p>效果二（点击灰条）：</p>
<div id=\"layout2\">
<div></div>
请完全撕开查看中奖结果。
</div>
</body>
</html>

ITPub博客

jQuery刮彩票兑奖效果

最新文章