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

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

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;
}

}

body,td,div,a,input{font:menu;line-height:180%}

Jb51.net

我们

网页特效

makeRectangularDropShadow(document.all["menu"], "#666666", 4);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Tags：带阴影 菜单

相关文章

  • 2007-03-03腾讯QQ网页在线客服，随网页滚动条上下移动的效果一
  • 2008-12-12鼠标滑过 放大显示效果的列表
  • 2007-10-10几个不错的自动收缩菜单导航效果
  • 2007-05-05一个不错的动感导航菜单
  • 2009-11-11MAC官方菜单纯CSS实现灰色会换色
  • 2007-03-03js实现的XP风格的右键菜单
  • 2007-05-05一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox
  • 2008-09-09无限级别的菜单（侧拉菜单）
  • 2009-12-12js tab效果的实现代码
  • 2007-09-09带缓冲的 收缩与展开内容效果

最新评论

赞 (0)

相关推荐

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

    Div+Js实现的带阴影菜单 微软以前网站曾用过 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 = 'abs

  • JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script>     function locking(){      document.all.ly.style.display="block";      document.all.ly.sty

  • JS+CSS实现带小三角指引的滑动门效果

    JS+CSS实现带小三角指引的滑动门效果

    本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

  • JavaScript实现带有子菜单和控件的slider轮播图效果

    JavaScript实现带有子菜单和控件的slider轮播图效果

    大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验.下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5.

  • JS封装的三级联动菜单(使用时只需要一行js代码)

    JS封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大家分享我在工作中封装并在项目中使用的三级级联操作代码,如有错误或者不当的地方欢迎大家指正. 使用简单(只需要一行代码) 可以根据需要设置是否显示"请选择"项 支持回调(在三级分类加载完成后触发回调事件) 支持一个页面多个级联菜单 演示效果预览: 三级联动封装 原理:将selec标签以及相关

  • WebGL three.js学习笔记之阴影与实现物体的动画效果

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 运行结果 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js

  • 使用JS组件实现带ToolTip验证框的实例代码

    使用JS组件实现带ToolTip验证框的实例代码

    本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va

  • JS实现的自定义右键菜单实例二则

    JS实现的自定义右键菜单实例二则

    本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    JS基于构造函数实现的菜单滑动显隐效果【测试可用】

    本文实例讲述了JS基于构造函数实现的菜单滑动显隐效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

随机推荐