Div+Js實現(xiàn)的帶陰影菜單微軟以前網(wǎng)站曾用過

2019-11-21 00:53:01

字體：大中小

供稿：網(wǎng)友

<title>Div+Js實現(xiàn)的帶陰影菜單 微軟以前網(wǎng)站曾用過</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="iwvjtn8m0"   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'" >武林網(wǎng)</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'" >網(wǎng)頁特效</div> <script> makeRectangularDropShadow(document.all["menu"], "#666666", 4); </script>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：純CSS實現(xiàn)的當(dāng)鼠標(biāo)移上圖片添加陰影效果代碼

下一篇：Js倒計時代碼，當(dāng)鼠標(biāo)離開頁面與回到頁面會自動停止與開始