JS 简单动画效果

发布于 2015-09-18 / 前端 / 0条评论 / 926浏览

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

有时候网站打开的有点慢,是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();

嘿嘿,简单吧
😃

评论
站长统计