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


Posted in Javascript onFebruary 18, 2016

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

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

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 #Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 #Javascript
AngularJS 2.0新特性有哪些
Feb 18 #Javascript
You might like
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
window.location.hash 使用说明
2010/11/08 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
微信小程序签到功能
2018/10/31 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python整数对象实现原理详解
2019/07/01 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
中餐厅主管的职责范文
2014/02/04 职场文书
大型晚会策划方案
2014/02/06 职场文书
创新比赛获奖感言
2014/02/13 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
《泉水》教学反思
2014/04/11 职场文书
社区活动总结报告
2014/05/05 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年路政工作总结
2014/12/10 职场文书
同学毕业留言寄语
2015/02/27 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
感谢信的技巧及范例
2019/05/15 职场文书