基于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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
JS常用算法实现代码
Nov 14 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
VuePress 中如何增加用户登录功能
Nov 29 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
PHP的autoload机制的实现解析
2012/09/15 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
JS 实现分页打印功能
2018/05/16 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
快速查询Python文档方法分享
2017/12/27 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python框架django项目部署相关知识详解
2019/11/04 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python之变量类型和if判断方式
2020/05/05 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
学雷锋宣传标语
2014/06/25 职场文书
2015年安全月活动总结
2015/03/26 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS