基于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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 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
5.PHP的其他功能
2006/10/09 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
详解如何实现一个简单的 vuex
2018/02/10 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python中logging日志库实例详解
2020/02/19 Python
快速创建python 虚拟环境
2020/11/28 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
2014年单位法制宣传日活动总结
2014/11/01 职场文书
优秀教师推荐材料
2014/12/16 职场文书
华清池导游词
2015/02/02 职场文书
鸦片战争观后感
2015/06/09 职场文书
红色经典观后感
2015/06/18 职场文书