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制作滚动的网页标题

10/14
2014
学习

MSClass.js滚动插件

在仿站的时候发现某网站的滚动大量使用这个插件,原来是MSClass.js,官网在此。现在网上流传的版本有很多都是07年的了,然而照样能用,我只能说666666了。我也摸索了下怎么用(我实验的时候用的是老版)。

首先引入这个js。之后需要一个容器,设置id,里面放上需要滚动的内容,也可以是列表,复杂些的内容也可以。最后在容器结束之后,为这个容器创建滚动对象。

容器不需要设置超出隐藏和宽高(你在参数里指定之后MSClass.js会把这些规则加到元素上)。容器内的子元素浮动的话可能导致滚动失效。至于滚动的参数可以看说明。

我发现图片的html换行的话,图片之间会产生空白,至今无法解决。使图片浮动的话就没有空白了,但是滚动会失效。

MSClass.js滚动插件

08/2
2014
学习

jq 文字逐行向上滚动

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里面的文字没有显示出来,滚动完才忽然显示)。

jq 文字逐行向上滚动