其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jQuery UI模拟刮彩票涂层显示结果 <br /> #keleyi{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}<br /> #keleyi div{position:absolute;top:0px;left:0px;width:100%;height:20px;background:#ccc;}<br /> #layout2{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}<br /> #layout2 div{position:absolute;top:0px;right:0px;width:100%;height:20px;background:#ccc;}<br /> <br /> $(document).ready(function() {<br /> $("#keleyi div").draggable({<br /> revert:function() {<br /> var a = $("#keleyi div").offset().left;<br /> var b = $("#kel"+"eyi").width();<br /> if (a >= b) {<br /> $("#keley"+"i").text("恭喜您获得5000万美元大奖!").css("color","red").fadeOut(200).fadeIn(500);<br /> return false;<br /> }else{<br /> return true;<br /> }<br /> },<br /> axis: "x", snap: "#keleyi", scroll: false}<br /> );<br /> $("#layout2 div").click(function() {<br /> $(this).animate({<br /> width : "+=20",<br /> }).animate({<br /> width : "-=50",<br /> });<br /> if ($(this).width() <= 30) {<br /> $("#layout2").text("恭喜您获得5000万美元大奖!").css("color","red").fadeOut(200).fadeIn(500);<br /> }<br /> });<br /> });<br /> 说明:不支持IE6! 效果一(拖拽灰条): 请完全刮开查看中奖结果。 效果二(点击灰条): 请完全刮开查看中奖结果。 这里给大家分享的是十分常用的刮奖的特效代码,希望小伙伴们能够喜欢。