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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Div+Js实现的带阴影菜单微软以前网站曾用过

Javascript: Javascript实例教程(12) 隐藏script代码; Javascript实例教程(11) 创建\"后退\"按钮; HTC：浏览器上的舞者; JavaScript 小技巧(第四集); Javascript实例教程(20) 使用HoTMetal(7); 点一下，首页地址添加到收藏夹(javascript); Javascript设计漫天雪花; Javascript实例教程(21) OLE Automation(2); Javascript实例教程(20) 使用HoTMetal(3); Javascript制作闪烁的边框; JavaScript对象与数组参考大全; Javascript实例教程(21) OLE Automation(3); 利用JavaScript制作倒计时牌; Javascript实例教程(5) 利用Javascript创建对象; 利用JAVASCRIPT制作简单动画; Javascript实例教程(15) JS代替CGI; Javascript实例教程(19) 数组; JavaScript[对象.属性]集锦之三; Javascript实例教程(21) OLE Automation(6); JavaScript 小技巧(第一集)

No. « ‹ 9 10 11 12 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 76 ::

收藏到网摘: n/a

Js倒计时代码，当鼠标离开页面与回到页面会自动停止与开始纯CSS实现的当鼠标移上图片添加阴影效果代码

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'"
>ruanchen.com</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倒计时代码，当鼠标离开页面与回到页面会自动停止与开始纯CSS实现的当鼠标移上图片添加阴影效果代码

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

评论 (0) All

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