2種jQuery 實(shí)現(xiàn)刮刮卡效果

更新時(shí)間：2015年02月01日 11:41:50 投稿：hebedich

這篇文章主要介紹了2種jQuery 實(shí)現(xiàn)刮刮卡效果,需要的朋友可以參考下

其中拖拽刮涂層效果使用jquery UI的draggable方法

以下是源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<title>jQuery UI模擬刮彩票涂層顯示結(jié)果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#keleyi{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
#keleyi 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://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#keleyi div").draggable({
revert:function() {
var a = $("#keleyi div").offset().left;
var b = $("#kel"+"eyi").width();
if (a >= b) {
$("#keley"+"i").text("恭喜您獲得5000萬美元大獎(jiǎng)！").css("color","red").fadeOut(200).fadeIn(500);
return false;
}else{
return true;
}
},
axis: "x", snap: "#keleyi", scroll: false}
);
$("#layout2 div").click(function() {
$(this).animate({
width : "+=20",
}).animate({
width : "-=50",
});
if ($(this).width() <= 30) {
$("#layout2").text("恭喜您獲得5000萬美元大獎(jiǎng)！").css("color","red").fadeOut(200).fadeIn(500);
}
});
});
</script>
</head>
<body>
<div>說明：不支持IE6！</div>
<p> </p>
<p>效果一（拖拽灰條）：</p>
<div id="keleyi">
<div></div>
請(qǐng)完全刮開查看中獎(jiǎng)結(jié)果。
</div>
<p> </p>
<p>效果二（點(diǎn)擊灰條）：</p>
<div id="layout2">
<div></div>
請(qǐng)完全刮開查看中獎(jiǎng)結(jié)果。
</div>
<br />
</body>
</html>

這里給大家分享的是十分常用的刮獎(jiǎng)的特效代碼，希望小伙伴們能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下
2013-11-11
js調(diào)用iframe實(shí)現(xiàn)打印頁面內(nèi)容的方法
這篇文章主要介紹了js調(diào)用iframe實(shí)現(xiàn)打印頁面內(nèi)容的方法,需要的朋友可以參考下
2014-03-03
jquery層級(jí)選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級(jí)選擇器(匹配父元素下的子元素實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
jQuery點(diǎn)擊彈出層彈出模態(tài)框點(diǎn)擊模態(tài)框消失代碼分享
這篇文章主要介紹了jQuery點(diǎn)擊彈出層，彈出模態(tài)框，點(diǎn)擊模態(tài)框消失的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-01-01
自寫的jQuery異步加載數(shù)據(jù)添加事件
這篇文章主要介紹一個(gè)自寫的jQuery異步加載數(shù)據(jù)添加事件的方法,需要的朋友可以參考下
2014-05-05
jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單效果(仿淘寶首頁菜單動(dòng)畫)
今天我們就帶大家體會(huì)一下級(jí)聯(lián)菜單的顯示，只是實(shí)現(xiàn)了簡(jiǎn)單的效果，不過大都原理是一樣的
2014-04-04
JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
這篇文章主要介紹了JQuery EasyUI 日期控件如何控制日期選擇區(qū)間,需要的朋友可以參考下
2014-05-05
javascript jQuery $.post $.ajax用法
這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
2008-07-07
最簡(jiǎn)單的jQuery程序入門者學(xué)習(xí)
用jQuery寫的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.
2009-07-07
jQuery的$.extend 淺拷貝與深拷貝
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下
2017-03-03