其中拖曳刮塗層效果使用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! 效果一(拖曳灰條): 請完全刮開查看中獎結果。 效果二(點選灰條): 請完全刮開查看中獎結果。 這裡給大家分享的是十分常用的刮取的特效代碼,希望小夥伴們能夠喜歡。