仿Google首页特效的动感导航菜单

2024-09-05 12:20:43

字体：大中小

来源：转载

供稿：网友

仿Google首页特效的动感导航菜单，这个效果已经很常见了，鼠标放上后图标会变大，移开后恢复原貌，鼠标连续在图标上的滑过，会有更神奇的效果，看上去不错的导航菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>仿Google首页特效的动感导航菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#fisheye_menu {	list-style: none;	padding: 0;	margin: 10px;	height: 81px;}#fisheye_menu li {	position: relative;	display: block;	float: left;}#fisheye_menu span {	position: absolute;	top: 100%;	left: 0;	text-align: center;	width: 79px;	padding: 1px;	margin: 0;	border: solid 1px #bbb;		color: #333;	background: #eee;}#fisheye_menu a {	text-decoration: none;}#fisheye_menu img {	border: 0;	vertical-align: top;}</style><script type="text/javascript">var fisheyemenu = {	startSize : 55,	endSize : 88,	imgType : ".gif",	init : function () {		var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");		var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");		for(var j=0; j<titleElements.length; j++) {			titleElements[j].style.display = 'none';		}		for(var i=0; i steps) window.clearInterval(elem.widthChangeMemInt);			}			,intervals)	},	easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {		var delta = maxValue - minValue;		var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);		return Math.ceil(stepp)	},	imgSmall : function (obj) {		imgSrc = obj.getAttribute("src");		var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);		var imgName = imgSrc.substr(0, typePos);		obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);	},	imgLarge : function (obj) {		imgSrc = obj.getAttribute("src");		var typePos = imgSrc.indexOf("_small", 0);		var imgName = imgSrc.substr(0, typePos);		obj.setAttribute("src", imgName+fisheyemenu.imgType);	}}if ( typeof window.addEventListener != "undefined" )    window.addEventListener( "load", fisheyemenu.init, false );else if ( typeof window.attachEvent != "undefined" )    window.attachEvent( "onload", fisheyemenu.init );else {    if ( window.onload != null ) {        var oldOnload = window.onload;        window.onload = function ( e ) {            oldOnload( e );            fisheyemenu.init();        };    }    else        window.onload = fisheyemenu.init;}</script></head><body><div>	<ul id="fisheye_menu">		<li><img src="/d/file/p/2024/09-05/6e29481fbb725b90e0bb59c30e747963.gif" alt="1"><span>图片搜索</span></li>		<li><img src="/d/file/p/2024/09-05/6570b82aeb1a90a5a38ea42b6de91fd7.gif" alt="2"><span>高级搜索</span></li>		<li><img src="/d/file/p/2024/09-05/6e29481fbb725b90e0bb59c30e747963.gif" alt="3"><span>Google地图</span></li>	</ul></div></body></html>

上一篇：QQ折叠菜单，JavaScript版代码

下一篇：仿新浪微博首页“大家正在说”渐入轮显效果