基于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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
用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
人大复印资料处理程序_补充篇
2006/10/09 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php使用正则验证中文
2016/04/06 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
Node.js学习入门
2017/01/03 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
信息管理专业学生自荐信格式
2013/09/22 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
婚礼迎宾词大全
2015/08/10 职场文书