基于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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
微信小程序 教程之事件
Oct 18 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
深入理解Python对Json的解析
2017/02/14 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
重构Python代码的六个实例
2020/11/25 Python
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
2014年社区植树节活动方案
2014/02/28 职场文书
奠基仪式主持词
2014/03/20 职场文书
生产助理岗位职责
2014/06/18 职场文书
就业意向书
2014/07/29 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员个人剖析材料
2014/09/30 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
写给同事的离职感言
2015/08/04 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Java spring单点登录系统
2021/09/04 Java/Android
php修改word的实例方法
2021/11/17 PHP