基于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 相关文章推荐
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
一个程序下载的管理程序(二)
2006/10/09 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python解析xml简单示例
2019/06/21 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python切图九宫格的实现方法
2019/10/10 Python
python正则表达式实例代码
2020/03/03 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
工作个人的自我评价
2014/01/14 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
标准毕业生自荐信
2014/06/24 职场文书
上党课的心得体会
2014/09/02 职场文书
2015年统战工作总结
2015/05/19 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers