基于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 对象、函数和继承
Jul 07 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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匹配字符中链接地址的方法
2014/12/22 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
基于PyTorch中view的用法说明
2021/03/03 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
会计专业毕业生推荐信
2013/11/05 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
效能风暴心得体会
2014/09/04 职场文书
检讨书模板
2015/01/29 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书