手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
摘要:基于jQuery实现仿搜狐辩论投票动画代码,一款个性的卡通小人正方反方辩论投票特效代码。移动动画效果平滑自然。具有非常好的用户体验。该源码兼...

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

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

效果演示 源码下载

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"></div> <div id="red"></div> <div id="white"></div> <div id="vs"></div> </div> </div> <div> <div id="aa2">正方<span id="aa"></span>票</div> <div id="bb2">反共<span id="bb"></span>票</div> <div id="all2">总共<span id="all"></span>票</div> </div>

以上代码是基于jQuery实现仿搜狐辩论投票动画代码,希望对大家有所帮助!

【基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)】相关文章:

jQuery实现给页面换肤的方法

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

jQuery实现dialog设置focus焦点的方法

jQuery使用zTree插件实现树形菜单和异步加载

基于jQuery插件实现环形图标菜单旋转切换特效

如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

jQuery实现自动滚动到页面顶端的方法

javascript实现youku的视频代码自适应宽度

一些很实用且必用的小脚本代码第1/5页

jQuery实现转动随机数抽奖效果的方法

精品推荐
分类导航