2种jQuery 实现刮刮卡效果
其中拖拽刮涂层效果使用jqueryUI的draggable方法
以下是源代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQueryUI模拟刮彩票涂层显示结果</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<styletype="text/css">
#keleyi{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
#keleyidiv{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;}
#layout2div{position:absolute;top:0px;right:0px;width:100%;height:20px;background:#ccc;}
</style>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<scriptsrc="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#keleyidiv").draggable({
revert:function(){
vara=$("#keleyidiv").offset().left;
varb=$("#kel"+"eyi").width();
if(a>=b){
$("#keley"+"i").text("恭喜您获得5000万美元大奖！").css("color","red").fadeOut(200).fadeIn(500);
returnfalse;
}else{
returntrue;
}
},
axis:"x",snap:"#keleyi",scroll:false}
);
$("#layout2div").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>
<divid="keleyi">
<div></div>
请完全刮开查看中奖结果。
</div>
<p></p>
<p>效果二（点击灰条）：</p>
<divid="layout2">
<div></div>
请完全刮开查看中奖结果。
</div>
<br/>
</body>
</html>
这里给大家分享的是十分常用的刮奖的特效代码，希望小伙伴们能够喜欢。