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

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

Javascript: javascript 动态数据下的锚点错位问题解决方法; jQuery 动画基础教程; jQuery 操作XML入门; ASP SQL防注入的方法; jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页; jquery 插件任意位置浮动固定层; JavaScript 检测浏览器和操作系统的脚本; 不要小看注释掉的JS 引起的安全问题; js实现的验证，学习用js控制td; javascript iframe中打开文件,并检测iframe存在否; Javascript typeof 用法; Javascript valueOf 使用方法; extjs form textfield的隐藏方法; extjs grid取到数据而不显示的解决; Ext第一周史上最强学习笔记---GridPanel（基础篇）; My Desktop :) 桌面式代码; javascript 双击文本框编辑功能代码; 不用写JS也能使用EXTJS视频演示; js 提取class相同的节点集合; js Li来实现的效果

No. « ‹ 122 123 124 125 › »

技术文章搜索

关键字

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

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

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