js+css3 动画数字累加

css:
.kk{
width:100px;
height:100px;
display:inline-block;
color:red;
text-align:center;
position: relative;
font-weight: bold;
line-height:100px;
background:url(./pic.png);
background-size: 100%;
line-height: 79px;
font-weight:bold;
font-size:18px;
}
.anmintate{
animation: animated_div 1s infinite;
-moz-animation: animated_div 1s infinite;
-webkit-animation: animated_div 1s infinite;
-o-animation: animated_div 1s infinite;
}
@-webkit-keyframes animated_div
{
0%{top:0;}
100%{top:50px;}
}
html:
<div class="kk anmintate">
6454
</div>
Js:
$(function(){
numAc('.kk','200','56','50') ;
})
// doc 对象
// time 起始
// seep 每次增加
// index 时间
function numAc(doc,time,seep,index){
obj_text = parseInt($(doc).text());
obj = $(doc);
times = parseInt(time);
var time = setInterval(function(){
times = times+=parseInt(seep);
obj.html(times);
if(times >= obj_text){
clearInterval(time);
obj.removeClass('anmintate');
return false;
}
},index);
}
改进后:
$(function(){
numAc('.kk','200','56','50','') ;
})
// doc 对象
// time 起始
// seep 每次增加
// index 时间
// num 最终数字 (可选项) 如果为空,会获取对象的INNerhtml
function numAc(doc,time,seep,index,num){
if(num){
obj_text = num ;
}else{
obj_text = parseInt($(doc).text());
}
obj = $(doc);
times = parseInt(time);
var time = setInterval(function(){
times = times+=parseInt(seep);
obj.html(times);
if(times >= obj_text){
clearInterval(time);
obj.removeClass('anmintate');
return false;
}
},index);
}
js+css3 动画数字累加的更多相关文章
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- CSS3动画与JS动画的优缺点?
JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
随机推荐
- Linux process state codes
Here are the different values that the s, stat and state output specifiers (header "STAT" ...
- Asterisk 安装与配置
如果用来管理 1.4 版本的 Asterisk ,可能会存在未知的问题.通过集成 CentOS . Asterisk 和 FreePBX , Fonality 公司提供了一个完全傻瓜式的 Asteri ...
- 广州Uber优步司机奖励政策(1月18日~1月24日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Javac编译和JIT编译
编译过程 不论是物理机还是虚拟机,大部分的程序代码从开始编译到最终转化成物理机的目标代码或虚拟机能执行的指令集之前,都会按照如下图所示的各个步骤进行: 其中绿色的模块可以选择性实现.很容易看出,上图中 ...
- iOS截取视频缩略图的两种方法
前言: 看完了使用MPMoviePlayerController播放在线视频,在实际应用中有时候须要获取视频的缩略图,我们来看看怎样截取指定时间内的视频缩略图. 一 使用MPMoviePlayerC ...
- vim 语法高亮
1 .配置文件的位置 在文件夹 /etc/ 以下.有个名为vimrc 的文件.这是系统中公共的vim配置文件.对全部用户都有效.而在每一个用户的主文件夹下,都能够自己建立私有的配置文件,命名为:&qu ...
- 只有在配置文件中或 Page 说明会 enableSessionState 至 true 时刻,能够使用会话状态。另外,还要确保应用程序配置 // 段包含 System.Web.SessionSta
首先,弄清楚我们的目的,我的目标是验证用户登录.那是,Session["userName"]!=null 在ok该 起初,我是这么写的,结果给出,提示如果上述错误标题,在调查的很长 ...
- DEPENDENT SUBQUERY” 和 “SUBQUERY”
http://blog.163.com/li_hx/blog/static/183991413201642410122327/ mysql> CREATE TABLE t1 (a INT, b ...
- gulp的点点滴滴
去年用gulp,但一直没有写篇博客,今天有时间无聊写一篇.... 什么是gulp?gulp的官网title上对这个工具有一个比较准确的定义,叫做:基于流的自动化构建工具.如果你查看它的网页源代码,还会 ...
- Quartz.NET配置(Log4net)
最近有个任务关于服务调度,想起以前看过Quartz.NET调度任务非常棒. 今天小试Quartz.NET,前面配置Quartz.NET很轻松,控制台也输出了.但是想配合Log4net来做日志文件,怎么 ...