saber 酱的抱枕

Fly me to the moon

04/20
2015
学习

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

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

	<script type="text/javascript">
		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);
	</script>

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

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

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