Question

我正在使用javascript来拍摄图像。（1）我希望图像覆盖整个页面，但它们只显示在标题区域中。我不知道要改变哪个部分以覆盖整个页面。它是一个wordpress网站，所以也许这与它有关？我把调用放在head部分的脚本中。这是脚本：

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。

我的第二个问题是当有人点击停止标志图片时阻止脚本执行的最佳方法。我已经在stackoverflow上阅读了类似问题的10个不同答案。所以我的想法是通过使用：

实现它

<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停止的最好方法吗？

Answer 1

这是一个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();
}

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

1 个答案: