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

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

Javascript: jQuery在IE中解释XML要注意的问题; JavaScript学习笔记:创建对象和构造类; JS学习笔记:Javascript类的继承; Javascript学习笔记:错误处理; JS学习笔记:防止发生命名冲突; 怎么让网页全屏显示？; JS教程：addDOMLoadEvent事件; MooTools教程(告诉你为什么学Mootools); 选择mootools的5个原因; js教程:JavaScript作用域(Scope); JS教程：日期格式转换函数; JavaScript中的Function对象; JS教程:理解JavaScript闭包; window.location.href出问题分析思路; JS教程:javascript获取页面属性; Webjx收集jQurey模式窗口的网页设计实例; 现代网页设计时尚:网页中对话框窗口; 概念网站实例:所有网页都在一个网页里; JS教程:鼠标悬停文字上显示图片; 网页内容切换效果实现的15个jQuery插件

No. « ‹ 175 176 177 178 › »

技术文章搜索

关键字

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

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

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