2 jenis jQuery untuk mencapai effect_jquery kad gores

Kesan salutan seret dan kikis menggunakan kaedah UI jquery yang boleh diseret

Berikut ialah kod sumber:

Salin kod Kod adalah seperti berikut: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > http://www.w3.org/1999/xhtml "> UI jQuery mensimulasikan lapisan tiket loteri mengikis untuk memaparkan hasil #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;} &lt ;/skrip> $(dokumen).sedia(fungsi() { $("#keleyi div").boleh diseret({ revert:function() { var a = $("#keleyi div").offset().left; var b = $("#kel" "eyi").lebar(); jika (a >= b) { $("#keley" "i").text("Tahniah kerana memenangi hadiah utama $50 juta!").css("color","red").fadeOut(200).fadeIn(500); pulangkan palsu; }lain{ kembali benar; } }, paksi: "x", snap: "#keleyi", tatal: false} ); $("#layout2 div").klik(function() { $(ini).bernyawa({ lebar : " =20", }).bernyawa({ lebar : "-=50", }); jika ($(ini).lebar() $("#layout2").text("Tahniah kerana memenangi hadiah utama $50 juta!").css("color","red").fadeOut(200).fadeIn(500); } }); }); Nota: IE6 tidak disokong!

Kesan 1 (seret bar kelabu):

Sila gores sepenuhnya untuk melihat keputusan yang menang.

Kesan 2 (klik bar kelabu):

Sila gores sepenuhnya untuk melihat keputusan yang menang.

Di sini saya ingin berkongsi dengan anda kod kesan khas yang biasa digunakan untuk menggores hadiah.