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

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

Javascript: 拖动一个HTML元素; JavaScript使用prototype定义对象类型(转)[; 枚举JavaScript对象的函数; 在Javascript中定义对象类别; 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[; 用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[; 检测邮箱地址是否合法 Check Mail Address (For: IE5+、FF1.06、Opera 7+ ...)[; 用于自动添加Digg This!按钮的JavaScript; Javascript实例教程(19) 使用HoTMetal(1); Javascript实例教程(19) 使用HoTMetal(2); Javascript实例教程(19) 使用HoTMetal(3); Javascript实例教程(19) 使用HoTMetal(4); Javascript实例教程(19) 使用HoTMetal(5); Javascript实例教程(19) 使用HoTMetal(6); Javascript实例教程(19) 使用HoTMetal(7); 实现复选框全选/全不选切换; js不是基础的基础; IE的不合理设计和Bugs; js倒计时代码; js静态作用域的功能。

No. « ‹ 37 38 39 40 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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实现的带阴影菜单微软以前网站曾用过