二、DOM同JAVASCRIPT相結合，實例——拖拽和褪色技術
例1. 頁面中拖拽效果的實現
可拖放DOM模式（Draggable DOM pattern）可以讓用戶在Web頁面中對各個部分進行編輯，即只需要選中要移動的部分，將其拖拽到新的位置上，就可以重新安排整個頁面的佈局效果。
新建頁面main.html，代碼如下：
<!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=UTF-8">
<script language="javascript" src="dom-drag.js"></script>
<link rel="stylesheet" href="style.css">
<title>Insert title here</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div id="news_root" style="LEFT:20px;TOP:20px" class="root">
<div id="news_handle" class="handle">
定製窗口
<span style="TEXT-ALIGN:right"></span>
</div>
<div id="news" class="text">
歡迎使用拖拽功能
</div>
</div>
</form>
<script language="javascript">
//獲得id爲news_handle的element
var news_handle = document.getElementById("news_handle");
//獲得id爲news_root的element
var news_root = document.getElementById("news_root");
Drag.init(news_handle,news_root);
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
</script>
</body>
</html>
其中介紹下，在本例中使用的一個開源框架中有關定位的javascript腳本文件。www.young.net 提代了一個 JavaScript 庫(dom-drag.js),可以幫助開發人員更快實現鼠標拖放的功能。dom-drag.js在附件中可以下載。
Css.css如下：
.root{
position:absolute;
height:150px;
width:200px;
BACKGROUND-COLOR:#eeeeee
}
.handle{
margin:2px;
padding:2px;
width:194px;
color:white;
background-color:navy;
font-family:verdana,sans-serif;
font-size:12px;
}
.text{
color:navy;
font-family:verdana,sans-serif;
font-size:12px;
}
如此就能你的拖拽功能了，大家試試吧！
例2. 褪色技術的實現
這裏需要同上一個實例相同的樣式，這裏就不在黏貼了。
直接說主題，新建頁面main2.html，代碼如下：
<!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=UTF-8">
<link rel="stylesheet" href="styles/style.css">
<title>Insert title here</title>
</head>
<body>
<form id="Form1" method="post">
<div id="news_root" style="LEFT:20px;TOP:20px" class="root">
<div id="news_handle" class="handle">
定製窗口
<span style="TEXT-ALIGN:right"></span>
</div>
<div id="news" class="text">
歡迎使用褪色技術
</div>
</div>
</form>
<script language="javascript">
//顏色漸變速度
var speed = 3;
//顏色漸變時需要使用的定時器對象數組
var timers;
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
timers = setTimeout("changeColor()",10);
function changeColor(){
var color = news.style.backgroundColor;
//當前背景顏色(rgb)的rg部分
var color_rg = color.slice(1,5);
//當前背景顏色(rgb)的b部分
//並將b部分增加一個數值，轉換爲10進制整數(向白色靠近)
var color_b = parseInt(color.slice(5),16) + speed;
//如果b部分不超過255
if(color_b < 255){
var b1 = Math.floor((color_b / 16)).toString(16);
var b2 = (color_b % 16).toString(16);
news.style.backgroundColor = "#" + color_rg + b1 + b2;
timers = setTimeout("changeColor()",100);
}else{
clearTimeout(timers);
}
}
</script>
</body>
</html>
完成代碼後，打開頁面等待5秒，你就發現顏色不斷的變淡。
有建議請聯繫QQ：540528747，我也在學習AJAX，大家一起研究，歡迎各位朋友一起交流技術。