昨天借用飞姐的佳作做的一个浪漫爱情网页

posted by David Chen at April 26, 2010, 9:04 AM

        昨天做的一个浪漫网页，浪漫的爱情文字内容是由飞姐创作的，从飞姐的博客上复制过来的，想不到飞姐这么有文彩，看一下主要的代码和说明，主要是javascript实现的无缝滚屏动画，和文字的变色动画。有兴趣的可以自已去下载整个html（包括js和css）回来看看。
        在说源码前先说一下EMBED标签在firefox和ie下的不同中的一点。对于display:none;在ie下仍然照常播放音乐，但是在firefox下，无论是直接定义为display:none;还是嵌套在一个display:none;的div中，只要是页面没有对EMBED进行渲染的情况下，音乐播放都没反应，最后为了要以通用，css定义为{display:block;width:0px;height:0px;overflow:hidden;}。
        看一下主要的js代码：

var myObj = null;
var getObj = function() {
	if(myObj) ;
	else {
		myObj = {};
		myObj.spans = document.getElementById("cx").getElementsByTagName("SPAN");
		myObj.cur = 0;
	}
};

// 这个函数用于初始化内容上各行的颜色,单数行和双数行颜色不同。
var spanColor = function() {
	getObj();
	for(var c=0;c<myObj.spans.length;c++) {
		if(c%2==0) myObj.spans[c].className = "s1";
		else myObj.spans[c].className = "s2";
	}
};

var spanRed = function() {
	getObj();
//这里的目的是在第三行开始出现向上的跑马灯功能，但是设置焦点行的css值为s3
	if(myObj.cur<2) {
		if(myObj.cur>0) myObj.spans[myObj.cur-1].className = (((myObj.cur-1)%2==0)?"s1":"s2");
		if(myObj.cur>=myObj.spans.length) myObj.cur = 0;
		myObj.spans[myObj.cur].className = "s3";
		myObj.cur ++;
	}
	else {
//这里是实现无缝的接合，不像一般的跑马灯跑完一遍再从头过。不断将当前行的内容设为下一行的内容，
下一行的内容又变为后一行的内容，依此类推，形成循环。
		var tmp0 = myObj.spans[0].innerHTML;
		for(var c=0;c<myObj.spans.length;c++) {
			var tmp1 = myObj.spans[c].innerHTML;
			if(c<myObj.spans.length-1) myObj.spans[c].innerHTML = myObj.spans[c+1].innerHTML;
		}
		myObj.spans[myObj.spans.length - 1].innerHTML = tmp0;
	}
	setTimeout('spanRed()', 2000);
//用setTimeout定时调用,延时的递归。
};