下拉菜单，滚动图片，多级关联下拉选择框

来源：互联网发布：sql连接oracle数据库编辑：程序博客网时间：2024/05/16 23:48

<div style="background-color:#3366CC;width:80px;height:30px;text-align:center;

padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"

onmouseover="myMenu.style.display='block'"

onmouseout="myMenu.style.display='none'">

<div id=myMenu style="position:absolute;left:-8px;top:27px;display:none;

width:90px;background-color:#3366CC;padding:5px;text-align:left;">

</div></div> <a href=#none>菜单实例</a></div></td></tr></table>

注:其它属性可省，若width省掉则上下连不上。

我们讲过position，当它取值absolute的时候，即绝对定位。既然是定位，就要有参照物。一般来讲，这个定位的参照物是body（即整个网页）的左上角，但如果其父级元素中有设置了position:absolute的元素，那么它的参照物就是该元素。知道了这样一个特性，我们就可以很容易的来实现了。
　另外，有一点在这里必须要着重说明一下，前面同时也讲过，当position的值为relative时，就是相对定位，为什么不用它来实现呢？我们必须要正确理解这里所谓的相对定位：它是指相对于原来在HTML中的位置所发生的偏移，而它仍占据原来在HTML中所占据的位置。而我们现在的菜单需要“悬浮”在网页元素之上，而这只有当position设为absolute时才可以做到。

<!—第一个DIV就是我们看到的按钮部分，它并未涉及任何定位的部分，

不要与下面两个混淆。-->

<!—第二个DIV，设置了position:absolute，但是并没有设置left/top，所以这时它仍与一个普通的HTML元素一样，出现在它应该出现的位置。等同于: position:relative; left:0px; top:0px;-->

<!—第三个DIV它的定位是相对于前一个DIV而不是Body，

因为前一个DIV设置了position:absolute-->

position : static | absolute | fixed | relative

取值：

static	:	默认值。无特殊定位，对象遵循HTML定位规则
absolute	:	将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed	:	未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative	:	对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position 。

<table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC>

  <tr><td width=10></td> <td width=80 align=center onmouseover="menuShow(menu01)"

    onmouseout="menuHide(menu01)">菜单实例</td>

    <!--上两行为菜单中显示的文字，注意这里面的事件触发：

      onmouseover="menuShow(menu01)"　鼠标经过时显示菜单；

      onmouseout="menuHide(menu01)"　鼠标移走时隐藏菜单。

      参数menu01即要显示的菜单的id，将在接下来的代码中看到。

      menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义-->

    <td></td> </tr></table>

<div style="position:absolute;top:36px;left:20px;display:none;

width:80px;height:100px;background-color:#DDDDDD;" id=menu01

onmouseover="menuShow(this)" onmouseout="menuHide(this)">

<!--以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。

  position、top、left、display四个CSS属性即上一章讲过的；

  width、height、background-color分别为宽度、高度、背景色。

  这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"，

  就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。  注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。

  在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。-->

  <br> 菜单内容</div><script language=javascript>

function menuShow(menu) //定义显示菜单的方法，参数menu即菜单的id。

{  menu.style.display='block';

  //注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。}

function menuHide(menu) //定义隐藏菜单的方法，参数menu即菜单的id。

{  menu.style.display='none'; //同上}</script>

动网管理点击隐藏

function showsubmenu(sid)

{whichEl = eval("submenu" + sid);

if (whichEl.style.display == "none")

{eval("submenu" + sid + ".style.display=/"/";");}

else{eval("submenu" + sid + ".style.display=/"none/";");}}

</SCRIPT><table width="199" border="0" cellpadding="0" cellspacing="0">

图片循环滚动效果

<td width=30></td>……

</td><td id=demo2 valign=top></td></tr></table></div>

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{demo.scrollLeft++}}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script> </td></tr></table>

注: offsetHeigh获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度。

offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。

offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。

offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。

多级关联下拉选择框的高效实现

<SELECT NAME="s1"><option>需要JavaScript才能正确显示</SELECT>

//选择框的名字selector = [ "s1", "s2", "s3", "s4" ];

//选择项: "名字", "值", 子选择

menu = [

"地球","1",

[

"中国","86",

[

"北京","BJ",

[

"--","1",null

"四川","SC",

[

"成都","28",null,

"乐山","",null,

"攀枝花","",null,

"自贡","",null,

"德阳","",null,

"绵阳","",null

] ],

"米国","1",

[

"加利福尼亚","CA",

[

"旧金山","1",null,

"洛杉矶","2",null

"华盛顿","WA",

[ "西雅图","seattle",null

] ] ],

"火星","2", [ "大峡谷","86", [ "小山丘","BJ", [ "A地区","28",null,

"B地区","",null, "C地区","",null ] ] ]];

function wizz(level){

if( level == 0 ) a = menu;

else { str = "menu";

for( i=0; i<level; i++ )

str += "[" + (document.all[selector[i]].selectedIndex * 3 + 2) + "]";

a = eval(str); }

if( a == null ) return;

s = document.all[selector[level]];

i = s.length;

while( i > 0 ) s.options[--i] = null;

while( i < Math.floor(a.length/3) )

s.options[i] = Option( a[i*3], a[i++*3+1] );

s.onchange = Function("wizz(" + (level+1) + ")");

wizz(level+1);}

wizz(0);</SCRIPT>