Div+Js实现的带阴影菜单微软以前网站曾用过

更新时间：2009年12月22日 23:00:18 作者：

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

<title>Div+Js实现的带阴影菜单 微软以前网站曾用过</title> <script> var global = window.document global.fo_shadows = new Array function 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'" >Jb51.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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript仿qq界面的折叠菜单实现代码
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,需要的朋友可以参下
2012-12-12
麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12
仿新浪微博首页"大家正在说"渐入轮显效果
仿新浪微博首页“大家正在说”渐入轮显效果，有淡入淡出的效果，新内容渐渐滚出来，老内容慢慢滚动下去，貌似很新奇的一种方式，从新浪微博获得。
2010-10-10
用javascript实现的不错的一款网页选项卡
用javascript实现的不错的一款网页选项卡...
2007-11-11
用js实现的比较经典实用的触发型导航菜单
用js实现的比较经典实用的触发型导航菜单...
2007-03-03
js 浮动层菜单收藏
最近做了一个通用的浮动层菜单替代函数，可以方便地把传统的 SELECT 单选菜单替换成时尚的浮动层菜单。
2009-01-01
javascript实现表现、结构、行为分离的选项卡效果！
javascript实现表现、结构、行为分离的选项卡效果！...
2007-05-05
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
MAC官方菜单纯CSS实现灰色会换色
MAC官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码.
2009-11-11
超个性的导航效果
超个性的导航效果...
2007-11-11