JS 简单动画效果

JavaScript

周末就睡觉看动漫对我来说是一种折磨（真的）。

有时候网站打开的有点慢，是iframe打开的慢，我就弄个loading页面，其实上网找张loading.gif就能够搞定的，可是图片在手机上显示的真的不是一般的挫，就实现了一个跑马灯和渐隐的动画。其实也不是什么动画，原理很简单

直接上马

  // 写纯js我有个习惯
  var el = function(id){
    return document.getElementById(id);
  }

跑马灯denghb

  // 动态显示denghb
  var contact = el('contact');
  var textArr = 'i[at]denghb.com'.split('');
  // 起跑点
  var j = 5,l = textArr.length;
  var textTimer;
  // 彩色文字
  var textColor = function(text){
    // TODO 可以随机颜色显示
    return '<span style="color: #fff;">'+text+'</span>';
  }

  // 跑文字效果
  var textRun = function(){
    var text = '';
    for(var i = 0;i&lt; l;i++){
      text += i == j?textColor(textArr[i]):textArr[i];
    }
    // 是否越界
    j = j == 10 ? 5:++j;
    contact.innerHTML = text;
    textTimer = setTimeout(textRun,200);
  }
  textRun();
  // 在不需要的时候调用注销事件
  // clearTimeout(textTimer);

渐隐效果

  // 加载页面
  var loading = el('loading'),s = 1.0,timer;
  var leave = function(){
    // 完全隐藏就结束
    if(0 > s){
      loading.style.display = 'none';
      clearTimeout(timer);
      clearTimeout(textTimer);
      //console.log(s);
      return;
    }
    loading.style.opacity = s;
    s-=0.05;
    timer = setTimeout(leave,100);
  }
  leave();

嘿嘿，简单吧
????

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名，转载请标明出处；