靈活實用的頁面廣告案例
發(fā)表時間：2023-07-18 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]靈活實用的頁面廣告實例 目前，許多主頁上流行放置一個浮動層的廣告圖像（通常位于頁面右下方），顯示在文字層之上，當頁面上下滾動時，廣告圖像并不隨頁面滾動，它總能在窗口中保持一個固定位置。本程序就是這種...
靈活實用的頁面廣告實例
目前，許多主頁上流行放置一個浮動層的廣告圖像（通常位于頁面右下方），顯示在文字層之上，當頁面上下滾動時，廣告圖像并不隨頁面滾動，它總能在窗口中保持一個固定位置。本程序就是這種廣告效果的一個實例，并在原有的基礎(chǔ)上增加了拖動功能，如果在瀏覽頁面時需要觀察的內(nèi)容正好被廣告圖像遮擋，可將廣告圖像拖到其它位置。并解決了圖像拖動中鼠標按鍵的Click動作與執(zhí)行廣告圖像鏈接的Click動作之間的沖突。直接點擊廣告圖像即可執(zhí)行圖像鏈接，而在圖像拖動過程中的鼠標按下和釋放的動作不會觸發(fā)廣告鏈接。這樣改進后，用戶在瀏覽你的頁面時會感到更加方便、自然。
程序是由JavaScript腳本語言編寫的，并不復(fù)雜，為了節(jié)省文章篇幅起見，就不在此處對程序原理作過多的說明了，而是在后面的程序文檔中給出詳實的注釋語句。讀者通過閱讀注釋說明就會明了實現(xiàn)的原理，并可從中了解到如何在屏幕上定位圖像，拖動圖像等許多動態(tài)HTML語句的編程方法。如果想直接使用這個程序，只要將演示頁面的相應(yīng)內(nèi)容復(fù)制到自己頁面內(nèi)的對應(yīng)位置就可以使用了。
程序文檔分為二個部分，dragtest.htm是演示用的主頁面程序，mydrag.js是由主頁面調(diào)用的外部腳本程序文件，還使用了一個演示用的圖像文件：myimage.gif 。將主頁面文件、腳本文件和圖像文件放置在相同目錄下，就可正常使用。具體的程序文檔內(nèi)容如下：
（一）·簡化的主頁面演示程序文檔：dragtest.htm
<html>
<head>
<title>可拖動的廣告圖像演示頁面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css">
<!--
/*設(shè)定一個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標記的屬性中指定前面設(shè)定的ID樣式。-->
<!-- 注意<a>標記中的onclick="return if_link();"事件語句， -->
<!-- 由它調(diào)用是否執(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>
/*調(diào)用圖像拖動控制程序的外部腳本文件*/
/*注意此腳本的調(diào)用要放置在body區(qū)域的下部*/
</SCRIPT>
</body>
</html>
（二）·由主頁面調(diào)用的外部腳本程序文檔：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事件調(diào)用的圖像抓取函數(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;
//將拖動判別變量設(shè)為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事件調(diào)用的圖像移動函數(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ù)調(diào)用的圖像放置函數(shù)。
//表明拖動過程結(jié)束。
function dropEl() {
whichEl=null;
}
//根據(jù)圖像是否被拖動過來決定是否執(zhí)行
//與圖像有關(guān)的鏈接。
function if_link(){
if(offset_pixel>0)
//如果圖像被拖動過，則此函數(shù)返回假，
//不執(zhí)行與圖像有關(guān)的鏈接。
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";
}
//以下是在文檔中設(shè)定的鼠標事件句柄。
document.onmousedown = grabEl;
document.onmousemove = moveEl;
document.onmouseup = dropEl;
document.onmouseover = curEl;
//定時調(diào)用圖像移動函數(shù)，此時為1秒。
action = window.setInterval("position_img()",1000);
//////////外部腳本控制程序結(jié)束//////////////////
本程序在IE 4.0以上版本的瀏覽器下使用通過。
文章署名：一帆
作者姓名：趙莉麗 ．
電子郵件：cnyf@21cn.com
【本文版權(quán)歸作者與奧索網(wǎng)共同擁有，如需轉(zhuǎn)載，請注明作者及出處】
