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>
这里给大家分享的是十分常用的刮奖的特效代码,希望小伙伴们能够喜欢。