Rumah  >  Artikel  >  hujung hadapan web  >  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
WBOYasal
2016-05-16 15:14:491456semak imbas

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>

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

Kenyataan:
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