基于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 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
js仿京东放大镜效果
Aug 09 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
用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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
一个简洁的多级别论坛
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python 函数基础知识汇总
2018/03/09 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python实现指定ip端口扫描方式
2019/12/17 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
手机促销活动方案
2014/02/05 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
校园绿化美化方案
2014/06/08 职场文书
会计电算化专业求职信
2014/06/10 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python