基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼(附源碼下載)

更新時(shí)間：2016年02月18日 14:25:57 投稿：mrr

這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼的相關(guān)資料,需要的朋友可以參考下

基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼，一款個(gè)性的卡通小人正方反方辯論投票特效代碼。移動(dòng)動(dòng)畫效果平滑自然。具有非常好的用戶體驗(yàn)。該源碼兼容目前最新的各類主流瀏覽器。

效果演示源碼下載

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>

以上代碼是基于jQuery實(shí)現(xiàn)仿搜狐辯論投票動(dòng)畫代碼，希望對大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

webuploader模態(tài)框ueditor顯示問題解決方法
這篇文章主要為大家詳細(xì)介紹了webuploader模態(tài)框ueditor顯示問題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
用JQUERY增刪元素的代碼
用JQUERY增刪元素的代碼，需要的朋友可以參考下
2012-02-02
jquery ajax同步異步的執(zhí)行最終解決方案
添加async:false.即修改為同步了，什么意思？按同事解釋就是，這是等這個(gè)ajax有了返回值后才會(huì)執(zhí)行下面的js一語道破天機(jī)，怪不得以前很多ajax調(diào)用里面的賦值都不起作用
2013-04-04
JQuery控制DIV的選取實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query控制DIV的選取實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
jquery ajax執(zhí)行后臺(tái)方法
jquery ajax調(diào)用動(dòng)態(tài)網(wǎng)頁內(nèi)容的方法，其實(shí)下面的這個(gè)例子很簡單的返回?cái)?shù)據(jù)。
2010-03-03
JQuery實(shí)現(xiàn)防止退格鍵返回的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)防止退格鍵返回的方法,實(shí)例分析了jQuery實(shí)現(xiàn)使Backspace不可用而瀏覽器中Backspace仍可用的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
JQuery為textarea添加maxlength屬性的代碼
textarea默認(rèn)不支持maxlength屬性。所以通過jquery實(shí)現(xiàn)下。具體的看代碼。
2010-04-04
jQuery 圖片切換插件(代碼比較少)
jQuery 插件圖片切換第一次自已償試寫插件，需要的朋友可以參考下
2012-05-05
基于jquery的圖片的切換(以數(shù)字的形式)
圖片的切換時(shí)一個(gè)常用的功能。下面實(shí)現(xiàn)的是一個(gè)點(diǎn)擊數(shù)字來進(jìn)行圖片的切換。學(xué)習(xí)jquery的朋友可以參考下原理。
2011-02-02
jQuery的文檔處理程序詳解
這篇文章主要介紹了jQuery的文檔處理程序,結(jié)合實(shí)例形式詳細(xì)分析了jQuery文檔處理程序的概念、原理、使用方法與相關(guān)注意事項(xiàng),并詳細(xì)講述了文檔處理程序的優(yōu)勢,需要的朋友可以參考下
2016-05-05