上下飘动的气球动画实现方式

//气球动画
function myfn(o,t){
    var n=0;
    var status=0;
    setInterval(function(){
        var top1=o.offset().top;//40
        n++;
        if(status==0){
            o.offset({top:top1+1});
        }else{
            o.offset({top:top1-1});
        }
        if(n==20){
            status=status==0 ? 1: 0;
            n=0;
        }
    },t);
};
$(‘.cardList li‘).each(function(index) {
    if(index%2==1){
        time=70;
    }else if(index%2==2){
        time=30;
    }else{
        time=50;
    }
    myfn($(this),time);
});
时间: 2024-10-06 21:01:21

上下飘动的气球动画实现方式的相关文章

web 动画实现方式

这这里,总结了一些 我知道的不用框架来实现动画的方式,总的来说有两种,第一种是用css的transition或keyframes+animation,第二种用js来实现 首先看基本结构 <style> div { position: relative; background: #999; width: 50px; height: 50px; } .ani { } </style> <body> <div class="ani"></

一个不简单的气球动画

用css3画出气球形状 <style> *{padding:0;margin:0;} body{background: #222;overflow: hidden;} .balloon{ position: absolute; width: 160px; height: 160px; background: #faf9f9; border-radius: 160px 160px 64px 160px; transform: rotate(45deg); box-shadow: -8px -8p

IOS开发之UI中开启动画的方式

UI中开启动画的方式 开启动画是UIImageView中的功能属性  有渐进式动画和序列帧动画 渐进式动画包括头尾式动画和block式动画 序列帧动画即为在极短时间内播放一组连续的图片所产生的动画效果 首先需要创建一个UIImageView对象为imageView1.序列帧动画基本步骤 将所要播放的图片数组赋值给UIImageView对象的animationImages属性,它就是一个数组对象 imageView.animationImages=array 设置动画的执行次数(animation

iOS页面切换动画实现方式。

1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDuration:0.2f animations:^{ detail.view.frame = CGRectMake(0, 0, detail.view.frame.size.width, detail.view.frame.size.height); } completion:^(BOOL finished) { UITableVie

性能更好的js动画实现方式&mdash;&mdash;requestAnimationFrame

用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeout和setInterval有着严重的性能问题,虽然某些现代浏览器对这两函个数进行了一些优化,但还是

Cocos2dx 小技巧(十二) 一种可行的系列动画播放方式

定义: 将一个类(Adaptee)的接口转换成客户(Client)希望的另外一个接口(Target). 目标接口(Target):客户所期待的接口.目标可以是具体的或抽象的类,也可以是接口. 需要适配的类(Adaptee):需要适配的类或适配者类. 适配器(Adapter):使得一个东西适合另一个东西的东西.百度中定义为:接口转换器.通过包装一个需要适配的对象,把源接口转换成目标接口. 为什么要适配:需要的东西已做好,但是不能用,短时间又不能改造,想办法适配它. 作用: 使得原本由于接口不兼容而

Android activity动画调用方式

问题场景: 如何实现Activity从左下角进入, 然后按其中某个button, 退出到左下角? 1. 调用动画的方式. 有2种方式. 一是在xml文件里指定activity的theme, 二是在startActivity和finish函数之后调用 overridePendingTransition(int enterAnim, int exitAnim); 由于我的代码里activity的theme已经指定, 因此选取了第二种方式 2. 动画. 使用了两种动画,指定左下角的关键代码是andro

0065 animation:动画、动画序列、动画常见属性、 动画简写方式、速度曲线细节、案例大数据热点图、案例奔跑的熊大

什么是动画 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) /* keyframes: 关键帧 */ @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } } 语法格式(使用动画) div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animati

性能更好的js动画实现方式——requestAnimationFrame

本文转载,原文地址:http://www.cnblogs.com/2050/p/3871517.html 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTi