1.html ----checkbox使用
<html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action = "http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>
2. 一段判断到底是哪个select的option被选中的代码
<form name="form1">
<select name="file_source" size="1" id="file_source" onChange="alert(document.form1.file_source.options[document.form1.file_source.selectedIndex].value)">
<option selected value=""></option>
<option value="办公室">办公室</option>
<option value="机房">机房</option>
<option value="教研室">教研室</option>
<option value="开发室">开发室</option>
</select>
</form>
3. 用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果
说实话，Js代码确实很强大，但是编码往往很麻烦，像这次我找了一圈我要的这种鼠标经过显示隐藏层的效果看到的都是一堆堆代码，而且不容易记忆，也就是“不人性化”。后来参考了我以前做的类似的效果：鼠标经过改变背景图的代码，形成这个“用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果”的方法，具体看代码：
Quote
<a href="/class.asp?class_ID=272" onMouseOver="document.all.menulayer_1.style.visibility=''" onMouseOut="document.all.menulayer_1.style.visibility='hidden'">關於我們</a>
上面这段是超链接的文字部分，要注意的是其中的“menulayer_1”，这个可以自定义命名，一个超链接关联一个，不可重复。另外要注意的是“visibility='hidden'”，这个就是鼠标离开后，隐藏的层就会隐藏。
Quote
<div id="menulayer_1" class="menulayer" style="visibility: hidden; padding: 225px 0px 0px 9px;">About Us, About Blazing Flames.</div>
这个就是默认隐藏的层的内容，注意他的ID要和之前的代码相呼应。
代码就这么多，灵活运用很好玩。
|
|
4.鼠标放上去显示层，鼠标移开隐藏显示层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>层</title>
</head>
<body>
<a href="#" onMouseover="div1.style.display=''" onMouseOut="div1.style.display='none'">鼠标移上来</a>
<div id=div1 style="background-color:#0033FF; width:100; display:none" >
这里放JS
</div>
<br>
</body>
</html>
5.鼠标经过弹出层
<!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/xhtml">
<head><title>-</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<div id="Loading" style="display:none" οndblclick="this.style.display='none'"></div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
