2011-04-24 29 views
0

如果你有經驗的JavaScript和DOCTYPE聲明之間的關係,任何幫助,將不勝感激。我使用wordpress,我試圖將光標腳本包含在頁面中。該腳本的工作原理沒有默認的wordpress文檔類型,使用它 - 它沒有。任何建議如何使光標腳本工作,請?遊標JAVASCRIPT需要適應WordPress的DOCTYPE

我的WordPress的HTML文檔類型聲明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

代碼光標:

<STYLE type="text/css"> 
    <!-- 
    .kisser { 
     position:absolute; 
     top:0; 
     left:0; 
     visibility:hidden; 
    } 
    --> 
    </STYLE> 

    <SCRIPT language="JavaScript1.2" type="text/JavaScript"> 
    <!-- cloak 

    //Kissing trail 
    //Visit http://www.rainbow.arch.scriptmania.com for this script 

    kisserCount = 15 //maximum number of images on screen at one time 
    curKisser = 0 //the last image DIV to be displayed (used for timer) 
    kissDelay = 1200 //duration images stay on screen (in milliseconds) 
    kissSpacer = 30 //distance to move mouse b4 next heart appears 
    theimage = "cur.png" //the 1st image to be displayed 
    theimage2 = "small_heart.gif" //the 2nd image to be displayed 



    //Browser checking and syntax variables 
    var docLayers = (document.layers) ? true:false; 
    var docId = (document.getElementById) ? true:false; 
    var docAll = (document.all) ? true:false; 
    var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document." 
    var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":"" 
    var stylebitK = (docLayers) ? "":".style" 
    var showbitK = (docLayers) ? "show":"visible" 
    var hidebitK = (docLayers) ? "hide":"hidden" 
    var ns6=document.getElementById&&!document.all 
    //Variables used in script 
    var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage 
    lastX = 0 
    lastY = 0 
    //Collection of functions to get mouse position and place the images 
    function doKisser(e) { 

     posX = getMouseXPos(e) 
     posY = getMouseYPos(e) 
     if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) { 
     showKisser(posX,posY) 
     lastX = posX 
     lastY = posY 
     } 
    } 
    // Get the horizontal position of the mouse 
    function getMouseXPos(e) { 
     if (document.layers||ns6) { 
     return parseInt(e.pageX+10) 
     } else { 
     return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft)) 
     } 
    } 
    // Get the vartical position of the mouse 
    function getMouseYPos(e) { 
     if (document.layers||ns6) { 
     return parseInt(e.pageY) 
     } else { 
     return (parseInt(event.clientY) + parseInt(document.body.scrollTop)) 
     } 
    } 
    //Place the image and start timer so that it disappears after a period of time 
    function showKisser(x,y) { 
     var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x 
     if (curKisser >= kisserCount) {curKisser = 0} 
     eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx) 
     eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y) 
     eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'") 
     if (eval("typeof(kissDelay" + curKisser + ")")=="number") { 
     eval("clearTimeout(kissDelay" + curKisser + ")") 
     } 
     eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)") 
     curKisser += 1 
    } 
    //Make the image disappear 
    function hideKisser(knum) { 
     eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'") 
    } 

    function kissbegin(){ 
    //Let the browser know when the mouse moves 
    if (docLayers) { 
     document.captureEvents(Event.MOUSEMOVE) 
     document.onMouseMove = doKisser 
    } else { 
     document.onmousemove = doKisser 
    } 
    } 
    window.onload=kissbegin 
    // decloak --> 
    </SCRIPT> 


    <!--Simply copy and paste just before </BODY> section of your page.--> 

    <SCRIPT language="JavaScript" type="text/JavaScript"> 
    <!-- cloak 
    // Add all DIV's of hearts 
    if (document.all||document.getElementById||document.layers){ 
    for (k=0;k<kisserCount;k=k+2) { 
     document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n') 
     document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n') 

    } 
    } 

    // decloak --> 
    </SCRIPT> 
+3

測試對於4.x的時代,瀏覽器?使用一大堆全局變量?廣泛使用'eval'?支持'onload'?這個腳本充滿了對古代瀏覽器和可怕,可怕的風格的解決方法。我把它扔出去並從頭開始(好吧,不完全是,因爲它是一個光標跟蹤腳本,我只是把它扔掉,然後離開去顫抖一會兒)。 – Quentin 2011-04-24 17:33:35

+3

該腳本非常可怕。你真的想實現什麼?從那些高度可疑的來源攫取討厭的舊腳本並不是獲得現代網站工作的最佳方式。 – Pointy 2011-04-24 17:34:50

回答

0

腳本充斥着非常古老的瀏覽器檢測代碼,這可能導致它在打破「新」帶有更嚴格DOCTYPE的瀏覽器。

嘗試刪除腳本標記中的'language =「JavaScript1.2」'。如果這不起作用,您必須重寫瀏覽器檢測。

實際的腳本雖然不是很複雜,但也許你可以在其他地方找到並組合它們。 你需要做兩件事情:

  1. 隱藏光標(與CSS做)
  2. 獲取鼠標的位置,把你自己的光標那裏(通常是圖像)。爲此,您需要一個獲取鼠標位置的腳本。

應該不會太難:)

+0

'語言'屬性沒有做任何事情,它被棄用,並且只被用作瀏覽器確定腳本類型的最後手段(如果它不假定JavaScript是默認的(非常罕見,現在)和沒有'type'屬性);您不能使用舊的,棄用的屬性來更改JavaScript引擎的行爲。而且,在現代瀏覽器中,您可以使用CSS來設置光標圖像的樣式;不是我喜歡它,但它是可能的。 – 2011-04-24 19:23:56

+0

語言已被棄用,並且類型是絕對必需的(請檢查W3C)。 – Halcyon 2011-04-24 23:58:12

+0

不在[最新規範](http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#script)中,它默認爲'text/javascript'因爲所有瀏覽器在未指定時都會假定該類型。 – 2011-04-25 09:10:14