月度归档:2016年04月

网易文字输入效果分析

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

(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);
})();

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

仿京东 视差效果

废话不多说,直接上代码

window.onload = function() {

    var oUl = document.getElementById('ul_container'),
    l = oUl.offsetWidth / 2,
    //外层UL的宽度除以2
    t = oUl.offsetHeight / 2,
    //外层UL的高度除以2
    aLi = document.getElementsByTagName('li'); //获取Li
    oUl.onmousemove = function(ev) {
        var oEv = ev || event,
        //将鼠标对象赋值给oEv  短路操作
        iL = oEv.clientX,
        //当前鼠标所在X轴的坐标
        iT = oEv.clientY; //当前鼠标所在Y轴的坐标
        //aLi[i].style.zIndex 层级
        //通过不同的层级得到不同的移动范围,获得 视差效果
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.marginLeft = (iL - l) / 100 * aLi[i].style.zIndex + 'px';
            aLi[i].style.marginTop = (iT - t) / 70 * aLi[i].style.zIndex + 'px';
        }
    }
}

查看示例:仿京东视差效果
下载源码:下载源码

元素高度百分百解决方案

第一种:(推荐使用)
其实原理很简单:设置高度100%的前提是,父元素(父容器)必须有高度,html和body这两个特殊的元素初始化时并没有默认高度。
所以我们给根元素html和body元素设置height:100%(一定要两个元素都加上哦!),
然后再给目标元素设置height:100%,这时就会有效果了

第二种:
给元素添加 position:absolute;
神奇的事情发生了,height:100% 起作用了

第三种:
用js实现,这里为了省代码,所以用第三方jquery库

function resizeBackground(){
$('.content').css({
       'height': $(window).height()
 });
}
$(window).resize(function() {
    resizeBackground();
});
window.onload = function() {
   resizeBackground();
}