2種jQuery 實現(xiàn)刮刮卡效果
更新時間：2015年02月01日 11:41:50 投稿：hebedich
這篇文章主要介紹了2種jQuery 實現(xiàn)刮刮卡效果,需要的朋友可以參考下
其中拖拽刮涂層效果使用jquery UI的draggable方法
以下是源代碼：
復(fù)制代碼 代碼如下:
<!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萬美元大獎！").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萬美元大獎！").css("color","red").fadeOut(200).fadeIn(500);
}
});
});
</script>
</head>
<body>
<div>說明：不支持IE6！</div>
<p> </p>
<p>效果一（拖拽灰條）：</p>
<div id="keleyi">
<div></div>
請完全刮開查看中獎結(jié)果。
</div>
<p> </p>
<p>效果二（點擊灰條）：</p>
<div id="layout2">
<div></div>
請完全刮開查看中獎結(jié)果。
</div>
<br />
</body>
</html>
這里給大家分享的是十分常用的刮獎的特效代碼，希望小伙伴們能夠喜歡。
您可能感興趣的文章:
- jQuery橫向擦除焦點圖特效代碼分享
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- Jquery插件之多圖片異步上傳
- jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
- JQuery Jcrop 實現(xiàn)圖片裁剪的插件
- jQuery Lightbox 圖片展示插件使用說明
- 基于jQuery圖片平滑連續(xù)滾動插件
- jquery 圖片預(yù)加載 自動等比例縮放插件
- jquery圖片播放瀏覽插件prettyPhoto使用詳解
- jquery 圖片上傳按比例預(yù)覽插件集合
- jQuery使用eraser.js插件實現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
相關(guān)文章
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下2013-11-11
js調(diào)用iframe實現(xiàn)打印頁面內(nèi)容的方法
這篇文章主要介紹了js調(diào)用iframe實現(xiàn)打印頁面內(nèi)容的方法,需要的朋友可以參考下2014-03-03
jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery點擊彈出層彈出模態(tài)框點擊模態(tài)框消失代碼分享
這篇文章主要介紹了jQuery點擊彈出層，彈出模態(tài)框，點擊模態(tài)框消失的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
這篇文章主要介紹一個自寫的jQuery異步加載數(shù)據(jù)添加事件的方法,需要的朋友可以參考下2014-05-05
jQuery實現(xiàn)級聯(lián)菜單效果(仿淘寶首頁菜單動畫)
今天我們就帶大家體會一下級聯(lián)菜單的顯示，只是實現(xiàn)了簡單的效果，不過大都原理是一樣的2014-04-04
JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
這篇文章主要介紹了JQuery EasyUI 日期控件如何控制日期選擇區(qū)間,需要的朋友可以參考下2014-05-05
javascript jQuery $.post $.ajax用法
這是一個簡單的 POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù)，請使用 $.ajax。2008-07-07
用jQuery寫的一個簡單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.2009-07-07
這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關(guān)資料,需要的朋友可以參考下2017-03-03