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   class="owc7tln"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

javascript仿qq界面的折疊菜單實現代碼
最近一直在研究網頁特效,看到qq界面的折疊菜單,于是冒出個想法,自己寫一個類似的,需要的朋友可以參下
2012-12-12
麥雞的TAB切換功能結合了javascript和css
麥雞的TAB切換功能結合了javascript和css...
2007-12-12
仿新浪微博首頁"大家正在說"漸入輪顯效果
仿新浪微博首頁“大家正在說”漸入輪顯效果，有淡入淡出的效果，新內容漸漸滾出來，老內容慢慢滾動下去，貌似很新奇的一種方式，從新浪微博獲得。
2010-10-10
用javascript實現的不錯的一款網頁選項卡
用javascript實現的不錯的一款網頁選項卡...
2007-11-11
用js實現的比較經典實用的觸發(fā)型導航菜單
用js實現的比較經典實用的觸發(fā)型導航菜單...
2007-03-03
js 浮動層菜單收藏
最近做了一個通用的浮動層菜單替代函數，可以方便地把傳統(tǒng)的 SELECT 單選菜單替換成時尚的浮動層菜單。
2009-01-01
javascript實現表現、結構、行為分離的選項卡效果！
javascript實現表現、結構、行為分離的選項卡效果！...
2007-05-05
css+js下拉菜單
js+css實現的簡單的下來菜單。兼容性好。
2009-05-05
MAC官方菜單純CSS實現灰色會換色
MAC官方網站的菜單,實際上是看著好看,但看了代碼感覺不太實用,因為為了實現這么一個效果代碼太繁瑣,而且菜單修改起來也極不方便,建議大家以學習的態(tài)度閱讀源碼.
2009-11-11
超個性的導航效果
超個性的導航效果...
2007-11-11