网易文字输入效果分析

带光标闪烁的文字输入效果分析
上代码:

(function() {

//获取d元素到的高
//{ d } ul元素
var getHeight = function(d) {
return d.offsetHeight || d.clientHeight;
}

var index = 0,
//li索引临时变量
ntesannouce = document.getElementById('ntesannouce'),//ul的父元素

ul = ntesannouce.getElementsByTagName('ul')[0],//ul元素

len = ul.getElementsByTagName('li').length,//li的长度

as = ul.getElementsByTagName('a'),//a元素集合

height = getHeight(ul),//ul的高

step = height / len; //ul的高 / li的长度 = 每个li的高

//文字输入效果实现
//{ d } ul的父元素
//{ callback } 回调函数
var insetText = function(d, callback) {

//修改ul的父元素top样式
d.style.top = -step * index + 'px';

var texta = as[index],//当前显示的a元素

text = texta.innerHTML,//当前a元素的内容

textlen = text.length,//内容的长度

tcount = 1; //截取用的索引 默认从第一个字开始

texta.innerHTML = ''; //以上变量有值后 清空a元素的内容

//设置 定时器 60毫秒执行一次
var inter = setInterval(function() {
tcount++;

//核心思路 截取a元素的内容长度并覆盖原来的内容
texta.innerHTML = text.substring(0, tcount);

//截取完最后一个字后 清除定时器
if (tcount > textlen) {
clearInterval(inter);
index++callback();
return;
}
},
80)
}

//加载时检测ul的父元素是否存在,不存在则中断程序
if (ntesannouce.length <= 0) return; //检测是否需要重置到默认状态 var exit = function() { //3000毫秒后 执行检测 setTimeout(function() { if (index >= len) {
ntesannouce.style.top = 0;
index = 0;
}
insetText(ntesannouce, exit);
},
3000)
}

//初始化调用
insetText(ntesannouce, exit);
})();

查看实例:文字输入效果
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注