基于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 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
子页向父页传值示例
2013/11/27 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
python实现抖音视频批量下载
2018/06/20 Python
Selenium定位元素操作示例
2018/08/10 Python
Python模块的加载讲解
2019/01/15 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
什么是Python中的顺序表
2020/06/02 Python
python和js交互调用的方法
2020/06/23 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
教育专业个人求职信
2013/12/02 职场文书
派出所所长先进事迹
2014/05/19 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
颐和园导游词
2015/01/30 职场文书
护士自我推荐信范文
2015/03/24 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
三国演义读书笔记
2015/06/25 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js