js实现淡出效果和展开闭合效果

这些效果jquery中都有了，不过要自己实现

因为这个效果层内部，不仅会有图片，还会有flash，所以，这个层还需要一些特殊处理

	switch($fileext) {
		case 'jpg':
		case 'jpeg':
		case 'gif':
		case 'png':
			$content = '<img style="position:absolute;width:'.$w.'px;height:'.$h.'px;" src="'.$imgflashurl.'" />';
			break;
		case 'flv':
			$content = '<span id="'.$randomid.'" style="position:absolute;"></span><script type="text/javascript" reload="1">$(\''.$randomid.'\').innerHTML=AC_FL_RunContent(\'width\', \''.$w.'\', \'height\', \''.$h.'\', \'allowNetworking\', \'internal\', \'allowScriptAccess\', \'never\', \'src\', \''.STATICURL.'image/common/flvplayer.swf\', \'flashvars\', \'file='.rawurlencode($imgflashurl).'\', \'quality\', \'high\', \'wmode\', \'transparent\', \'allowfullscreen\', \'true\');</script>';
			break;
		case 'swf':
			$content = '<span id="'.$randomid.'" style="position:absolute;"></span><script type="text/javascript" reload="1">$(\''.$randomid.'\').innerHTML=AC_FL_RunContent(\'width\', \''.$w.'\', \'height\', \''.$h.'\', \'allowNetworking\', \'internal\', \'allowScriptAccess\', \'never\', \'src\', \''.$imgflashurl.'\', \'quality\', \'high\', \'bgcolor\', \'#ffffff\', \'wmode\', \'transparent\', \'allowfullscreen\', \'true\');</script>';
			break;
		default:
			$content = '';
	}
	if($content) {
		if($type == 1) {
			return '<div id="threadbeginid" style="display:none;position:absolute;top:0px;left:0px;z-index:999;">'.$content.'<div style="background:white;filter:alpha(opacity=0);opacity:0;position:relative;z-index:10;left:0px;top:0px;width:'.$w.'px;height:'.$h.'px;"><a href="'.$linkaddr.'" target="_blank" style="display:block;width:'.$w.'px;height:'.$h.'px;"></a></div></div><script type="text/javascript">threadbegindisplay(1, '.$w.', '.$h.');</script>';
		} else {
			return '<div id="threadbeginid" style="filter:alpha();position:absolute;top:0px;left:0px;z-index:999;">'.$content.'<div style="background:white;filter:alpha(opacity=0);opacity:0;position:relative;z-index:10;left:0px;top:0px;width:'.$w.'px;height:'.$h.'px;"><a href="'.$linkaddr.'" target="_blank" style="display:block;width:'.$w.'px;height:'.$h.'px;"></a></div></div><script type="text/javascript">threadbegindisplay(0, '.$w.', '.$h.');</script>';
		}
	} else {
		return '';
	}

主要是加了一些样式。发现代码写的过长，以后要改掉，良好的编码习惯很重要。
下面是淡出效果的js函数

function autoface(w, h) {
	this.imgobj = $('threadbeginid');
	this.imgobj.style.left = (document.body.clientWidth - w)/2 + 'px';
	this.imgobj.style.top = (document.body.clientHeight - h)/2 + 'px';
	this.opacity = 100;
	this.faceout = function() {
		if(BROWSER.ie) {
			this.imgobj.filters.alpha.opacity = this.opacity;
		} else {
			this.imgobj.style.opacity = this.opacity/100;
		}
		if(this.opacity <= 0) {
			this.imgobj.style.display = 'none';
			return;
		}
		this.opacity--;
		setTimeout(this.faceout, 50);
	};
	setTimeout(this.faceout, 10000);
}

将fade写成face了。。。。
然后是展开闭合的效果

function autozoom(w, h) {
	this.height = 0;
	this.imgobj = $('threadbeginid');
	this.imgobj.style.left = (document.body.clientWidth - w)/2 + 'px';
	this.imgobj.style.top = (document.body.clientHeight - h)/2 + 'px';
	this.imgobj.style.overflow = 'hidden';
	this.imgobj.style.display = '';
	this.autozoomin = function() {
		this.height += 5;
		if(this.height >= h) {
			setTimeout(this.autozoomout, 10000);
			return;
		}
		this.imgobj.style.height = this.height + 'px';
		setTimeout(this.autozoomin, 50);
	};
	this.autozoomout = function() {
		this.height -= 5;
		if(this.height >= h) {
			this.imgobj.style.display = 'none';
			return;
		}
		this.imgobj.style.height = this.height + 'px';
		setTimeout(this.autozoomout, 50);
	};
	this.autozoomin();
}

完成功能的同时，尽量使得代码够紧凑，功能看着简单明了，希望达到了目的。