基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

前端技术 2023/09/05 JavaScript

基于jQuery实现仿搜狐辩论投票动画代码 ，一款个性的卡通小人正方反方辩论投票特效代码。移动动画效果平滑自然。具有非常好的用户体验。该源码兼容目前最新的各类主流浏览器。

效果演示     源码下载

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实现仿搜狐辩论投票动画代码，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/13532

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案