虽然我对滚动标题一直很反感(有种你来个彩色+闪烁标题啊→_→),但是今天既然想到这个了,就顺手鼓捣出来了。点进本文页面,你会发现标题确实已经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制作滚动的网页标题
在仿站的时候发现某网站的滚动大量使用这个插件,原来是MSClass.js,官网在此。现在网上流传的版本有很多都是07年的了,然而照样能用,我只能说666666了。我也摸索了下怎么用(我实验的时候用的是老版)。
首先引入这个js。之后需要一个容器,设置id,里面放上需要滚动的内容,也可以是列表,复杂些的内容也可以。最后在容器结束之后,为这个容器创建滚动对象。
容器不需要设置超出隐藏和宽高(你在参数里指定之后MSClass.js会把这些规则加到元素上)。容器内的子元素浮动的话可能导致滚动失效。至于滚动的参数可以看说明。
我发现图片的html换行的话,图片之间会产生空白,至今无法解决。使图片浮动的话就没有空白了,但是滚动会失效。
MSClass.js滚动插件
http://www.51xuediannao.com/js/jquery/jquery_scroll_sx.html
这个代码用起来比较简单,也不需要去js文件里面进行修改(当然js里面的注释还是要删的)。演示中还附带了方向控制按钮。
使用方法:
首先在要滚动的部分(ul标签)外嵌套一层div,设置id。div需要设置overflow:hidden;
然后引入jq,再引入这个演示中下载的js,最后添加下面的js代码:
注意id替换一下,line是一次滚动几行,speed是滚动的快慢,timer是滚动的间隔,按钮没有的话不用管。鼠标经过会暂停。
但是它有一个问题:这个js不是通过复制内容来循环的。它滚动时先把ul的margin-top设为负值,这一行滚动上来之后再归零。所以我们准备的li要多放一行,以免ul完成整个滚动过程之后,最后一行字才显示出来(即滚动过程中,这行li里面的文字没有显示出来,滚动完才忽然显示)。