Saber 酱的抱枕

Fly me to the moon

04/20

2015

学习

使用js制作滚动的网页标题

saber 撰写 js 标题滚动无回复 2,022次查看

虽然我对滚动标题一直很反感（有种你来个彩色+闪烁标题啊→_→），但是今天既然想到这个了，就顺手鼓捣出来了。点进本文页面，你会发现标题确实已经Duang的加上了特技。

var titleText="反派死于话多，正派死于不补刀";
document.title=titleText;
var start=0;
var end=start+9;
var setTitle;
var zanting=false;
function titleChange () {
    document.title=titleText.substring(start, end)+'…';
    start++;
    end++;
    if (end>titleText.length) {
        start=0;
        end=start+9;
    }
}
setTitle=setInterval(titleChange, 400);

思路：
先确定要把标题固定到多少个字符，此例中是9个字符，始终保持截取的开始位置和结束位置相差9。
代码的执行：
1.设置title
2.输出标题之后，开始位置和结束位置都自增
3.末端到达了结尾之后，重新开始

注意：
一个汉字是一个长度；一个字母也是一个长度。标题应该选取多长视情况更改。
加上省略号可以提示用户还没滚动完，也可以使用户不必一直盯着最后的位置看，减少焦虑（至少对我自己是这样的Orz
调整到合适的滚动速度。春度太高也不好哦。

var titleText='Servant Saber、召唤に従い参上した。';
var start=0;
var end=start+13;
var setTitle;
var zanting=false;
function titleChange () {
    document.title=titleText.substring(start, end)+'…';
    start++;
    end++;
    if (end>titleText.length) {
        start=0;
        end=start+13;
    }
}
    if(location.href=='/%e4%bd%bf%e7%94%a8js%e5%88%b6%e4%bd%9c%e6%bb%9a%e5%8a%a8%e7%9a%84%e7%bd%91%e9%a1%b5%e6%a0%87%e9%a2%98/'){
    setTitle=setInterval(titleChange, 400);
}

使用js制作滚动的网页标题

撤销评论