|
靈活實用的頁面廣告實例
目前，許多主頁上流行放置一個浮動層的廣告圖像（通常位于頁面右下方），顯示在文字層之上，當頁面上下滾動時，廣告圖像并不隨頁面滾動，它總能在窗口中保持一個固定位置。本程序就是這種廣告效果的一個實例，并在原有的基礎上增加了拖動功能，如果在瀏覽頁面時需要觀察的內容正好被廣告圖像遮擋，可將廣告圖像拖到其它位置。并解決了圖像拖動中鼠標按鍵的Click動作與執(zhí)行廣告圖像鏈接的Click動作之間的沖突。直接點擊廣告圖像即可執(zhí)行圖像鏈接，而在圖像拖動過程中的鼠標按下和釋放的動作不會觸發(fā)廣告鏈接。這樣改進后，用戶在瀏覽你的頁面時會感到更加方便、自然。
程序是由JavaScript腳本語言編寫的，并不復雜，為了節(jié)省文章篇幅起見，就不在此處對程序原理作過多的說明了，而是在后面的程序文檔中給出詳實的注釋語句。讀者通過閱讀注釋說明就會明了實現(xiàn)的原理，并可從中了解到如何在屏幕上定位圖像，拖動圖像等許多動態(tài)HTML語句的編程方法。如果想直接使用這個程序，只要將演示頁面的相應內容復制到自己頁面內的對應位置就可以使用了。
程序文檔分為二個部分，dragtest.htm是演示用的主頁面程序，mydrag.js是由主頁面調用的外部腳本程序文件，還使用了一個演示用的圖像文件：myimage.gif 。將主頁面文件、腳本文件和圖像文件放置在相同目錄下，就可正常使用。具體的程序文檔內容如下：
（一）·簡化的主頁面演示程序文檔：dragtest.htm
<html>
<head>
<title>可拖動的廣告圖像演示頁面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css">
<!--
/*設定一個ID樣式，名稱中要包含DRAG字串，供程序識別可拖動元件用。*/
#elDRAGone {
position: absolute;
left: 600; top: 300;
color: red;
width: 120;
height:60;
z-index:3;
}
-->
</STYLE>
</HEAD>
</head>
<body bgcolor="#FFFFFF" style="font-size:9pt;color:'#555500';">
<!-- 在DIV標記的屬性中指定前面設定的ID樣式。-->
<!-- 注意<a>標記中的onclick="return if_link();"事件語句， -->
<!-- 由它調用是否執(zhí)行鏈接動作的判別函數(shù)，如果返回值為“假”， -->
<!-- 則不執(zhí)行鏈接動作，反之則執(zhí)行鏈接動作。-->
<DIV ID="elDRAGone"><a href="http://www.sohu.com" onclick="return if_link();"> <img src=http://www.okasp.com/techinfo/"myimage.gif" border="0" alt="可拖動到任意位置！"><a></DIV>
<SCRIPT LANGUAGE="JavaScript">
/*連續(xù)輸出多個文字串，供頁面演示用。*/
for(i=0;i<50;i++){
document.write("這是一個“可拖動的廣告圖像”演示程序。<br><br>");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src=mydrag.js>
/*調用圖像拖動控制程序的外部腳本文件*/
/*注意此腳本的調用要放置在body區(qū)域的下部*/
</SCRIPT>
</body>
</html>
（二）·由主頁面調用的外部腳本程序文檔：mydrag.js
///////外部腳本控制程序開始///////
///////程序名：mydrag.js ///////
//記錄頁面的垂直滾動位置的變量。
lastScrollY=0;
//在程序中校準圖像在頁面中的位置。
with (document.all.elDRAGone) {
style.pixelTop=offsetTop;
style.pixelLeft=offsetLeft;
}
//在頁面上定位圖像的函數(shù)。
function position_img() {
//計算出頁面垂直滾動的偏移量。
diffY = document.body.scrollTop-lastScrollY;
//保存本次頁面滾動位置。
lastScrollY=document.body.scrollTop;
//移動圖像到原來的窗口位置。
document.all.elDRAGone.style.pixelTop += diffY;
}
//建立記錄圖像初始位置的變量，用于計算圖像是否被拖動過。
originX=originY=0;
//如果圖像被拖動過，則offset_pixel變量的值大于0。
offset_pixel=0;
//記錄圖像在文檔中的現(xiàn)行坐標值。
currentX = currentY = 0;
//保存被拖動對象的變量。
whichEl = null;
//onmousedown事件調用的圖像抓取函數(shù)。
function grabEl() {
//只允許用鼠標左鍵拖動！
if (event.button !=1) {return;}
//將鼠標點擊的對象存入whichEl變量。
whichEl=event.srcElement;
//判斷是否為可拖動的對象。
while(whichEl.id.indexOf("DRAG")==-1){
whichEl=whichEl.parentElement;
if (whichEl==null){return;}
}
//記錄圖像抓取時的初始窗口位置。
originX=event.clientX;
originY=event.clientY;
//將拖動判別變量設為0值。
offset_pixel=0;
//校準圖像在文檔上的位置。
whichEl.style.pixelLeft=whichEl.offsetLeft;
whichEl.style.pixelTop=whichEl.offsetTop;
//記錄圖像相對于文檔的現(xiàn)行位置坐標。
currentX=event.clientX+document.body.scrollLeft;
currentY=event.clientY+document.body.scrollTop;
}
//onmousemove事件調用的圖像移動函數(shù)。
function moveEl() {
//如果沒有抓取拖動的對象，則返回。
if (whichEl==null){return;}
//如果拖動了圖像，則將變量offset_pixel
//賦予大于0的值，以標記圖像已被拖動。
//從而使圖像在拖動完成后不執(zhí)行鏈接功能。
offset_X=Math.abs(event.clientX-originX);
offset_Y=Math.abs(event.clientY-originY);
offset_pixel=offset_X+offset_Y;
//計算拖動時新的文檔坐標的位置。
newX=event.clientX+document.body.scrollLeft;
newY=event.clientY+document.body.scrollTop;
//計算出現(xiàn)行位置與拖動前初始位置的偏差。
distanceX=newX-currentX;
distanceY=newY-currentY;
//用現(xiàn)行位置更新初始位置變量。
currentX=newX;
currentY=newY;
//實際移動圖像的位置。
whichEl.style.pixelLeft +=distanceX;
whichEl.style.pixelTop +=distanceY;
event.returnValue=false;
}
//onmouseup函數(shù)調用的圖像放置函數(shù)。
//表明拖動過程結束。
function dropEl() {
whichEl=null;
}
//根據圖像是否被拖動過來決定是否執(zhí)行
//與圖像有關的鏈接。
function if_link(){
if(offset_pixel>0)
//如果圖像被拖動過，則此函數(shù)返回假，
//不執(zhí)行與圖像有關的鏈接。
return false;
else
//否則返回真值，執(zhí)行圖像的鏈接。
return true;
}
//改變可拖動對象為十字光標的句柄函數(shù)。
function curEl(){
Over_Element=event.srcElement;
while(Over_Element.id.indexOf("DRAG")==-1){
Over_Element=Over_Element.parentElement;
if (Over_Element==null){return;}
}
event.srcElement.style.cursor = "move";
}
//以下是在文檔中設定的鼠標事件句柄。
document.onmousedown = grabEl;
document.onmousemove = moveEl;
document.onmouseup = dropEl;
document.onmouseover = curEl;
//定時調用圖像移動函數(shù)，此時為1秒。
action = window.setInterval("position_img()",1000);
//////////外部腳本控制程序結束//////////////////
本程序在IE 4.0以上版本的瀏覽器下使用通過。
文章署名：一帆
作者姓名：趙莉麗 ．
電子郵件：cnyf@21cn.com
【本文版權歸作者與奧索網共同擁有，如需轉載，請注明作者及出處】
|
