基于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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
javascript动态加载二
Aug 22 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
小程序实现录音上传功能
Nov 22 Javascript
js实现点击烟花特效
Oct 14 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异步执行的详解
2013/06/03 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
Angular网络请求的封装方法
2018/05/22 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
python连接MySQL数据库实例分析
2015/05/12 Python
自己使用总结Python程序代码片段
2015/06/02 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
对祖国的寄语大全
2014/04/11 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android