Rumah > hujung hadapan web > tutorial js > Pelaksanaan kod animasi undian perdebatan seperti Sohu berdasarkan jQuery (dengan muat turun kod sumber)_jquery

Pelaksanaan kod animasi undian perdebatan seperti Sohu berdasarkan jQuery (dengan muat turun kod sumber)_jquery

WBOY
Lepaskan: 2016-05-16 15:14:49
asal
1487 orang telah melayarinya

Berdasarkan jQuery, kod animasi undian perbahasan Sohu tiruan dilaksanakan, kod kesan khas pengundian penjahat kartun yang diperibadikan. Animasi pergerakan adalah lancar dan semula jadi. Mempunyai pengalaman pengguna yang sangat baik. Kod sumber serasi dengan penyemak imbas arus perdana terkini.

Demonstrasi kesan Muat turun kod sumber

kod html:

<script type="text/javascript">
$(document).ready(function () {
var a = 500;
var b = 130;
$("#white").animate({ width: 0, left: "250px" }, 1000, function () {
$("#vs").fadeIn("slow", function () {
$("#all").html(a + b); $("#aa").html(a); $("#bb").html(b);
var newLeft = a / (a + b) * 500 - 20 + "px"; //20为vs 的一半
$("#vs").animate({ left: newLeft }, 1000);
$("#red").animate({ width: newLeft }, 1000);
});
});
});
</script>
<div id="box_bg">
<div id="container">
<div id="green" class="line"></div>
<div id="red" class="line"></div>
<div id="white" class="line"></div>
<div id="vs"></div>
</div>
</div>
<div style="width:440px; margin:0px auto;">
<div id="aa2" class="scope">正方<span id="aa"></span>票</div>
<div id="bb2" class="scope">反共<span id="bb"></span>票</div>
<div id="all2" class="scope">总共<span id="all"></span>票</div>
</div>
Salin selepas log masuk

Kod di atas adalah berdasarkan jQuery untuk melaksanakan kod animasi undian perdebatan seperti Sohu, saya harap ia akan membantu semua orang!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan