Fisheye 動感放大的菜單

2024-09-05 12:20:22

字體：大中小

來源：轉載

供稿：網友

Fisheye Menu，JS+CSS+XHTML動感放大的菜單，放到圖標上的時候，圖標會被放大，整個菜單有緩沖彈簧的效果，學jQuery的朋友見的比較多，不過本款沒有用到jQuery，效果卻同樣精彩。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fisheye 動感放大的菜單</title><style>#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/d42fea4678a4021ef912270f836540a9.gif" alt="源碼愛好者" /><span>Icon 1</span></li>				<li><img src="/d/file/p/2024/09-05/d41ce528c34986e1e122ab3a603b61dd.gif" alt="image description" /><span>Icon 2</span></li>				<li><img src="/d/file/p/2024/09-05/d42fea4678a4021ef912270f836540a9.gif" alt="源碼下載" /><span>Icon 3</span></li>				<li><img src="/d/file/p/2024/09-05/d41ce528c34986e1e122ab3a603b61dd.gif" alt="image description" /><span>Icon 4</span></li>				<li><img src="/d/file/p/2024/09-05/d42fea4678a4021ef912270f836540a9.gif" alt="codefans.net" /><span>Icon 5</span></li>				<li><img src="/d/file/p/2024/09-05/d41ce528c34986e1e122ab3a603b61dd.gif" alt="image description" /><span>Icon 6</span></li>			</ul>			</div>    </body></html>

上一篇：CSS+JS圓角下拉菜單

下一篇：側邊欄導航菜單，溢出式導航