2007-06-23
我做的第一个好用的JS!朋友们来看看吧! - [程序人生]
告诉你怎么用!
1、在桌面上建一个随意（**）.text，打开，把下面的JS代码，拷贝进去，然后再改这个（**）.text文件的名字为myMoveMenu.js
2、也一样在桌面上建一个随意（**）.text，打开把下面的HTML代码拷贝进去，也一样改一下（**）.text文件的名字为login.html
说明：里在有四个功能，一个是打开和隐藏一个DIV，再一个是最小化，关闭和移动。。。。
代码一、myMoveMenu.js
//可以移动的菜单
//初定义对象
var Mouse_Obj="none";
//初始坐标 X 和 Y
var pX;
var pY;
//获取对象的二个方法
document.onmousemove=D_NewMouseMove;
document.onmouseup=D_NewMouseUp;
//移动菜单方法
function moveMenu(Menu_Obj){
//获得菜单对赋给初定义对象
Mouse_Obj = Menu_Obj;
//菜单X
pX = parseInt(document.all(Mouse_Obj).style.left)-event.x;
//菜单Y
pY = parseInt(document.all(Mouse_Obj).style.top)-event.y;
}
//鼠标选中移动
function D_NewMouseMove(){
//对象不为空,则可以移动
if(Mouse_Obj!="none"){
document.all(Mouse_Obj).style.left = pX + event.x;
document.all(Mouse_Obj).style.top = pY + event.y;
event.returnValue = false;
}
}
//没有选中对象
function D_NewMouseUp(){
if(Mouse_Obj!="none"){
Mouse_Obj="none";
}
}
代码二、login.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div-第一个试验</title>
<SCRIPT language="javascript" src="myMoveMenu.js">
</SCRIPT>
<SCRIPT language="javascript" >
function checkMenu(table_id){//显示隐藏程序
var table_id;//表格ID
if (table_id.style.display == "none") {
//如果为隐藏状态
table_id.style.display="";
}else{//否则
table_id.style.display="none";//切换为隐藏状态
}//换图
}
</SCRIPT>
<style type="text/css">
<!--
#login {
position:absolute;
width:200px;
z-index:1;
overflow: auto;
text-align: center;
display: block;
margin: 10px;
border: 1px solid #336633;
visibility: visible;
}
#lonin_01 {
overflow: auto;
position: 固定;
visibility: visible;
height: auto;
width: auto;
font-size: 14px;
font-weight: bold;
color: #009933;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DDDDDD;
display: block;
background-position: center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #F7F7F7;
}
#login_name {
font-size: 12px;
color: #000000;
display: block;
margin-top: 10px;
}
.text {
border: 1px solid #999999;
height: 16px;
width: 120px;
}
#login_botton {
background-color: #F0FBF0;
padding: 5px;
border: 1px solid #CCCCCC;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#login_pwd {
font-size: 12px;
color: #000000;
margin-top: 8px;
}
#button {
font-size: 12px;
font-weight: bold;
color: #009933;
background-color: #DCF3DC;
border: 1px solid #58C758;
width: 60px;
height: 22px;
}
#reset {
font-size: 12px;
font-weight: bold;
color: #1188FF;
background-color: #E8F3FF;
border: 1px solid #3399FF;
width: 60px;
height: 22px;
}
#ti {
font-size: 12px;
color: #333333;
background-color: #F7F7F7;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
display: block;
padding-top: 5px;
height: 40px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 1px;
}
-->
</style>
</head>
<body>
<a href="#" onclick="checkMenu(login);">登录</a>
<div id="login" onmousedown="moveMenu('login');" style="position:absolute; left:200px;top:50px;display:none;">
<div id="lonin_01" onclick="checkMenu(check);">用户登录Loging... <a href="#" onclick="checkMenu(login);">X</a></div>
<div id="check">
<div id="login_name">用户名：
<input name="textfield" type="text" class="text" size="16" maxlength="32" />
</div>
<div id="login_pwd">密?码：
<input name="textfield2" type="password" class="text" size="17" maxlength="32" />
</div>
<div id="login_botton">
<input type="submit" name="tijiao" id="button" value="提交" />
?br /> <input type="reset" name="reset" id="reset" value="重置" />
</div>
<div id="ti"><a href="#">忘记密码？</a>?<a href="#">在这里找...</a> </div>
</div>
</div>
</body>
</html>
1、在桌面上建一个随意（**）.text，打开，把下面的JS代码，拷贝进去，然后再改这个（**）.text文件的名字为myMoveMenu.js
2、也一样在桌面上建一个随意（**）.text，打开把下面的HTML代码拷贝进去，也一样改一下（**）.text文件的名字为login.html
说明：里在有四个功能，一个是打开和隐藏一个DIV，再一个是最小化，关闭和移动。。。。
代码一、myMoveMenu.js
//可以移动的菜单
//初定义对象
var Mouse_Obj="none";
//初始坐标 X 和 Y
var pX;
var pY;
//获取对象的二个方法
document.onmousemove=D_NewMouseMove;
document.onmouseup=D_NewMouseUp;
//移动菜单方法
function moveMenu(Menu_Obj){
//获得菜单对赋给初定义对象
Mouse_Obj = Menu_Obj;
//菜单X
pX = parseInt(document.all(Mouse_Obj).style.left)-event.x;
//菜单Y
pY = parseInt(document.all(Mouse_Obj).style.top)-event.y;
}
//鼠标选中移动
function D_NewMouseMove(){
//对象不为空,则可以移动
if(Mouse_Obj!="none"){
document.all(Mouse_Obj).style.left = pX + event.x;
document.all(Mouse_Obj).style.top = pY + event.y;
event.returnValue = false;
}
}
//没有选中对象
function D_NewMouseUp(){
if(Mouse_Obj!="none"){
Mouse_Obj="none";
}
}
代码二、login.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div-第一个试验</title>
<SCRIPT language="javascript" src="myMoveMenu.js">
</SCRIPT>
<SCRIPT language="javascript" >
function checkMenu(table_id){//显示隐藏程序
var table_id;//表格ID
if (table_id.style.display == "none") {
//如果为隐藏状态
table_id.style.display="";
}else{//否则
table_id.style.display="none";//切换为隐藏状态
}//换图
}
</SCRIPT>
<style type="text/css">
<!--
#login {
position:absolute;
width:200px;
z-index:1;
overflow: auto;
text-align: center;
display: block;
margin: 10px;
border: 1px solid #336633;
visibility: visible;
}
#lonin_01 {
overflow: auto;
position: 固定;
visibility: visible;
height: auto;
width: auto;
font-size: 14px;
font-weight: bold;
color: #009933;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DDDDDD;
display: block;
background-position: center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #F7F7F7;
}
#login_name {
font-size: 12px;
color: #000000;
display: block;
margin-top: 10px;
}
.text {
border: 1px solid #999999;
height: 16px;
width: 120px;
}
#login_botton {
background-color: #F0FBF0;
padding: 5px;
border: 1px solid #CCCCCC;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#login_pwd {
font-size: 12px;
color: #000000;
margin-top: 8px;
}
#button {
font-size: 12px;
font-weight: bold;
color: #009933;
background-color: #DCF3DC;
border: 1px solid #58C758;
width: 60px;
height: 22px;
}
#reset {
font-size: 12px;
font-weight: bold;
color: #1188FF;
background-color: #E8F3FF;
border: 1px solid #3399FF;
width: 60px;
height: 22px;
}
#ti {
font-size: 12px;
color: #333333;
background-color: #F7F7F7;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
display: block;
padding-top: 5px;
height: 40px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 1px;
}
-->
</style>
</head>
<body>
<a href="#" onclick="checkMenu(login);">登录</a>
<div id="login" onmousedown="moveMenu('login');" style="position:absolute; left:200px;top:50px;display:none;">
<div id="lonin_01" onclick="checkMenu(check);">用户登录Loging... <a href="#" onclick="checkMenu(login);">X</a></div>
<div id="check">
<div id="login_name">用户名：
<input name="textfield" type="text" class="text" size="16" maxlength="32" />
</div>
<div id="login_pwd">密?码：
<input name="textfield2" type="password" class="text" size="17" maxlength="32" />
</div>
<div id="login_botton">
<input type="submit" name="tijiao" id="button" value="提交" />
?br /> <input type="reset" name="reset" id="reset" value="重置" />
</div>
<div id="ti"><a href="#">忘记密码？</a>?<a href="#">在这里找...</a> </div>
</div>
</div>
</body>
</html>
评论