近来门户网常用的文字与图片切换效果

2024-09-05 12:20:17

字体：大中小

来源：转载

供稿：网友

近来门户们都喜欢用的特效，左侧是一个大图片，右侧是对应文字，鼠标移动时，对应行的文字会变化，图片也相应的切换，如果没有鼠标动作时，它会自己播放，播放时间可调整，个人感觉挺不错的导航效果。

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>文字与图片切换</title><style>*{margin:0;padding:0;border:0;list-style:none}.focusPic{width:500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;}.focusPic .focusTitle{width:240px;float:right; font-size:14px; text-align:left;}.focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; }.focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;}.focusPic .focusTitle li a:hover {color:#bc2931;}.focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;}.focusPic .focusTitle .current a:hover {color:#bc2931;}.focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;}.focusPic #focusLeft{width:250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}.focusPic #focusLeft li{display:none;}.focusPic #focusLeft li.current{display:block;}</style></head><body><div class="focusPic"><ul id="focusLeft"><li class="current">VB在线出题考试系统</li><li>jQuery 仿iGoogle 主页模块拖动</li><li>jQuery UI 官方实例集</li><li>VB在线出题考试系统</li><li>小妖ASP投票调查系统 v4.0</li><li>jQuery 带动画的日期选择插件</li></ul><div class="focusTitle"><ul id="focusMenu"><li class="current">VB在线出题考试系统</li><li>jQuery 仿iGoogle 主页模块拖动</li><li>jQuery UI 官方实例集</li><li>VB在线出题考试系统（MSSQL）</li><li>小妖ASP投票调查系统 v4.0</li><li>jQuery 带动画的日期选择插件</li></ul></div><div class="clear"></div></div><script language="javascript" type="text/javascript">//<![CDATA[var $ = function(id) {	return document.getElementById(id);};Function.prototype.bind = function() {	if (arguments.length < 2 && arguments[0] == null) {		return this;	}    var __method = this, args = $A(arguments), object = args.shift();    return function() {		return __method.apply(object, args.concat($A(arguments)));    };};var isArray = function(testVar) {	return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;};var $A = function(variable) {	switch (isArray(variable)) {		case 1:			return variable;		case 2:			var arr = [], i = -1, len = variable.length;			while (++i < len) {				arr[i] = variable[i];			}			return arr;		default:			return [variable];	}};var addClass = function(elem, className) {	if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {		if (elem.className == "") {			elem.className = className;		} else {			elem.className += (" " + className);		}	}};var removeClass = function(elem, className) {	var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");	elem.className = newClass.substr(1, newClass.length - 2);};var addEvent = function(elem, eventName, handler) {	if (elem.addEventListener) {		elem.addEventListener(eventName, handler, false);	} else if (elem.attachEvent) {		elem.attachEvent("on" + eventName, handler);	}};function Slide(menus, contents, css, eventName, interval) {	var curSeq = 0, length = contents.length, timerIds = [], isStopped;	if (menus && length != menus.length) {		throw new Error("the amount of menus and contents is not equal");	}		var hide = function(seq) {		removeClass(contents[seq], css);		if (menus) {			removeClass(menus[seq], css);		}	};		var show = function(seq) {		addClass(contents[seq], css);		if (menus) {			addClass(menus[seq], css);		}		curSeq = seq;	};		this.showNext = function() {		var next = curSeq + 1;		if (next >= length) {			next = 0;		}		var i = length;		while (--i >= 0) {			if (i != next) {				hide(i);			} else {				show(i);			}		}	};		this.change = function(event) {		if (this != menus[curSeq]) {			var i = length;			while (--i >= 0) {				if (menus[i] != this) {					hide(i);				} else {					show(i);				}			}		}		e = window.event || event;		e.cancelBubble = true;	};		this.play = function(speed) {		isStopped = false;		timerIds.push(setInterval(this.showNext.bind(this), speed));	};		this.pause = function() {		isStopped = true;		var i = length;		while (--i >= 0) {			clearInterval(timerIds[i]);			timerIds.splice(i, 1);		}	};		var i = length;	while (--i >= 0) {		addEvent(menus[i], eventName, this.change.bind(menus[i]));		if (interval > 0) {			addEvent(menus[i], "mouseover", this.pause);			addEvent(menus[i], "mouseout", this.play.bind(this, interval));		}	}	if (interval > 0) {		this.play(interval);	}}var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000);//]]></script></body>

上一篇：仿门户网腾讯的头部导航菜单

下一篇：css制作菜单上浮动的小图标