阴影菜单，Div+Js版，微软以前网站曾用过

2024-09-05 12:20:30

字体：大中小

来源：转载

供稿：网友

Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。

<title>阴影菜单，Div+Js版，微软以前网站曾用过</title><script>var global = window.documentglobal.fo_shadows = new Arrayfunction makeRectangularDropShadow(el, color, size){	var i;	for (i=size; i>0; i--)	{		var rect = document.createElement('div');		var rs = rect.style		rs.position = 'absolute';		rs.left = (el.style.posLeft + i) + 'px';		rs.top = (el.style.posTop + i) + 'px';		rs.width = el.offsetWidth + 'px';		rs.height = el.offsetHeight + 'px';		rs.zIndex = el.style.zIndex - i;		rs.backgroundColor = color;		var opacity = 1 - i / (i + 1);		rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';		el.insertAdjacentElement('afterEnd', rect);		global.fo_shadows[global.fo_shadows.length] = rect;	}}</script><style>body,td,div,a,input{font:menu;line-height:180%}</style><div id=menu style="position:absolute; left: 10px; top: 10px; background: #EEEEEE; width: 120px; height: 100px; padding: 3px; border: 1 #999999 solid; cursor: default"><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">CodeFans.net</div><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">源码爱好者</div><div style="border: 1 solid #EEE"onmouseover="this.style.background='#CCC'; this.style.borderColor='#999'"onmouseout ="this.style.background='#EEE'; this.style.borderColor='#EEE'">网页特效</div><script>makeRectangularDropShadow(document.all["menu"], "#666666", 4);</script>

上一篇：线条型css滑动门

下一篇：相当漂亮的CSS蓝色滑动门式的导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注