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

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

Javascript: 站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox; 用js实现的十进制的颜色值转换成十六进制的代码; DHTML form validation; js资料toString 方法; js资料prototype 属性; js实现的网站首页随机公告随机公告; 一个效果写的HashTable代码; 用js实现的一个Flash滚动轮换显示图片代码生成器; 关于javascript函数的几个话题; 极致之美——百行代码实现全新智能语言; htm调用JS代码; 斑马线效果代码; 从新浪弄下来的全屏广告代码与使用说明; 用js实现预览待上传的本地图片; 用javascript自动显示最后更新时间; 表单提交时自动复制内容到剪贴板的js代码; 用roll.js实现的图片自动滚动+鼠标触动的特效; 一段js小代码，计算距春节还有多少天; js中设计一段程序，让它能够打印自己的方法收集藏; 自动生成文章摘要的代码[JavaScript 版本]

No. « ‹ 56 57 58 59 › »

技术文章搜索

关键字

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

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

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