Javascript只在标题中显示，但希望它显示在整个页面上

我正在使用JavaScript处理图片。（1）我希望图像覆盖整个页面，但它们只显示在标题区域中。我不知道要更改哪部分才能覆盖整个页面。这是一个WordPress的网站，或许这与它有关系？我把这个调用放在头部的脚本中。这是脚本：Javascript只在标题中显示，但希望它显示在整个页面上

var image="http://abyssinianguineapigtips.com/wp-content/uploads/2014/11/onepoop.png"; //Image path should be given here 
var no = 15; // No of images should fall 
var time = 0; // Configure whether image should disappear after x seconds (0=never): 
var speed = 10; // Fix how fast the image should fall 
var i, dwidth = 900, dheight =500; 
var nht = dheight; 
var toppos = 0; 

if(document.all){ 
    var ie4up = 1; 
}else{ 
    var ie4up = 0; 
} 

if(document.getElementById && !document.all){ 
    var ns6up = 1; 
}else{ 
    var ns6up = 0; 
} 

function getScrollXY() { 
    var scrOfX = 10, scrOfY = 10; 
    if(typeof(window.pageYOffset) == 'number') { 
    //Netscape compliant 
    scrOfY =window.pageYOffset; 
    scrOfX = window.pageXOffset; 
    } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
    //DOM compliant 
    scrOfY = document.body.scrollTop; 
    scrOfX = document.body.scrollLeft; 
    } else if(document.documentElement && 
     (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { 
    //IE6 standards compliant mode 
    scrOfY = document.documentElement.scrollTop; 
    scrOfX = document.documentElement.scrollLeft; 
    } 
    return [ scrOfX, scrOfY ]; 
} 

var timer; 

function ranrot() 
{ 

var a = getScrollXY() 
if(timer) 
{ 
    clearTimeout(timer); 
} 
toppos = a[1]; 
dheight = nht+a[1]; 
//alert(dheight); 

timer = setTimeout('ranrot()',2000); 
} 

ranrot(); 

function iecompattest() 
{ 
    if(document.compatMode && document.compatMode!="BackCompat") 
    { 
     return document.documentElement; 
    }else{ 
     return document.body; 
    } 

} 
if (ns6up) { 
    dwidth = window.innerWidth; 
    dheight = window.innerHeight; 
} 
else if (ie4up) { 
    dwidth = iecompattest().clientWidth; 
    dheight = iecompattest().clientHeight; 
} 

nht = dheight; 

var cv = new Array(); 
var px = new Array();  //position variables 
var py = new Array();  //position variables 
var am = new Array();  //amplitude variables 
var sx = new Array(); //step variables 
var sy = new Array(); //step variables 

for (i = 0; i < no; ++ i) { 
    cv[i] = 0; 
    px[i] = Math.random()*(dwidth-100); // set position variables 
    py[i] = Math.random()*dheight;  // set position variables 
    am[i] = Math.random()*20;   // set amplitude variables 
    sx[i] = 0.02 + Math.random()/10; // set step variables 
    sy[i] = 0.7 + Math.random(); // set step variables 
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>"); 
} 

function animation() { // animation function 
    for (i = 0; i < no; ++ i) { // iterate for every dot 
     py[i] += sy[i]; 
      if (py[i] > dheight-50) { 
       px[i] = Math.random()*(dwidth-am[i]-100); 
       py[i] = toppos; 
       sx[i] = 0.02 + Math.random()/10; 
       sy[i] = 0.7 + Math.random(); 
      } 
      cv[i] += sx[i]; 
      document.getElementById("dot"+i).style.top=py[i]+"px"; 
      document.getElementById("dot"+i).style.left=px[i] + am[i]*Math.sin(cv[i])+"px"; 
     } 
     atime=setTimeout("animation()", speed); 

} 

function hideimage(){ 
    if (window.atime) clearTimeout(atime) 
     for (i=0; i<no; i++) 
      document.getElementById("dot"+i).style.visibility="hidden" 
} 
if (ie4up||ns6up){ 
animation(); 
if (time>0) 
    setTimeout("hideimage()", time*1000) 
} 
animation(); 

/* Free Script provided by HIOXINDIA   */ 
/* visit us at http://www.hscripts.com  */ 
/* This is a copyright product of hioxindia.com */

该页面是here。

我的第二个问题是当有人点击停车标志图像时停止执行脚本的最佳方法。我在这里阅读了10个不同的答案，这里是关于stackoverflow的。所以我的想法是：把利用这一点：

<img src="stop.png" onclick="myEventHandler(event);" />

，我补充一下：

function myEventHandler(e) 
{ 
    if (!e) 
     e = window.event; 

    //IE9 & Other Browsers 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 
    //IE8 and Lower 
    else { 
     e.cancelBubble = true; 
    } 
}'

JS文件。（我从here得到）

这是最好的方法，使它停止onclick？

来源

2014-11-21 Michele

这是一个Z-指数问题/更改

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>"); 
}

到

document.write("<div class=\"img-object\" id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ (i + 1000) +"; VISIBILITY: visible; TOP: 15px;LEFT: 15px;\"><img src='"+image+"' border=\"0\"><\/div>"); 
}

使其覆盖整个页面。

和图像上单击时停止动画，此功能的工作原理：（HTML）：

<img src="stopsign.png" onclick="stopAnimation();" />

和功能：

function stopAnimation() { 
    if (window.atime) {clearTimeout(atime);} 
    jQuery('.img-object').hide(); 
}

来源

2014-11-22 20:31:41 Michele

Javascript只在标题中显示，但希望它显示在整个页面上

回答

相关问题