基于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 相关文章推荐
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
layer弹出层全屏及关闭方法
Aug 17 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php封装的page分页类完整实例
2016/10/18 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
VueJs组件prop验证简单介绍
2017/09/12 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
JS实现520 表白简单代码
2018/05/21 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python中setuptools的作用是什么
2020/06/19 Python
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
服务之星获奖感言
2014/01/21 职场文书
给市场的环保建议书
2014/05/14 职场文书
大气污染防治方案
2014/05/19 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
校运会宣传稿大全
2015/07/23 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS