2011-09-20 58 views
0

我想實現一個浮動圖像,當用戶滾動頁面時會向上/向下滾動。wordpress中的可滾動浮動圖像

我使用了一個可以在練習板上工作的代碼,但是當我在Wordpress footer.php中插入它時(就在指示結束標籤之前),它只是坐在那裏,不會滾動爲我滾動...

的代碼如下:

<script> 

if (!document.layers) 

document.write('<div id="divStayTopLeft" style="position:absolute">') 

</script> 

<layer id="divStayTopLeft"> 

<!--EDIT BELOW CODE TO YOUR OWN MENU--> 

<a href="google.ca"><img src="http://nailian.ca/wp-content/uploads/misc/coupon.png"></a> 

<!--END OF EDIT--> 

</layer> 


<script type="text/javascript"> 

//Enter "frombottom" or "fromtop" 
var verticalpos="fromtop" 

if (!document.layers) 
document.write('</div>') 

function JSFX_FloatTopDiv() 

{ 

    var startX = 3, 

    startY = 150; 

    var ns = (navigator.appName.indexOf("Netscape") != -1); 

    var d = document; 

    function ml(id) 

    { 

     var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 

     if(d.layers)el.style=el; 

     el.sP=function(x,y){this.style.left=x;this.style.top=y;}; 

     el.x = startX; 

     if (verticalpos=="fromtop") 

     el.y = startY; 

     else{ 

     el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 

     el.y -= startY; 

     } 

     return el; 

    } 

    window.stayTopLeft=function() 

    { 

     if (verticalpos=="fromtop"){ 

     var pY = ns ? pageYOffset : document.body.scrollTop; 

     ftlObj.y += (pY + startY - ftlObj.y)/8; 

     } 

     else{ 

     var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 

     ftlObj.y += (pY - startY - ftlObj.y)/8; 

     } 

     ftlObj.sP(ftlObj.x, ftlObj.y); 

     setTimeout("stayTopLeft()", 10); 

    } 

    ftlObj = ml("divStayTopLeft"); 

    stayTopLeft(); 

} 

JSFX_FloatTopDiv(); 

</script> 

的鏈接會在這裏:http://nailian.ca/

+0

你還在編碼Netscape 4嗎? – awm

+0

哈哈,我很抱歉,顯然我搜索的代碼非常老。任何可以發揮魔力的新代碼? – icyyicee

回答

1

我認爲CSS樣式position: fixed是什麼您這裏需要。

這是example

+0

nopes,位置:固定使圖像完全消失:( – icyyicee

+0

得到它的工作,雖然沒有使用Javascript,所以沒有部分動畫滾動效果:( – icyyicee