Javascript只显示在标题中,但希望它显示在整个页面上
Javascript only displays in header, but want it to display on whole page
我正在使用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 */
页面在这里。
我的第二个问题是当有人点击停车标志图像时阻止脚本执行的最佳方法。 我已经在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 文件。 (我从这里得到的)
这是让它停止点击的最佳方法吗?
这是一个
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>");
}
让它覆盖了整个页面。
要在单击图像时停止动画,此功能有效:(网页):
<img src="stopsign.png" onclick="stopAnimation();" />
和功能:
function stopAnimation() {
if (window.atime) {clearTimeout(atime);}
jQuery('.img-object').hide();
}
相关文章:
- 当我悬停使用php连接到mysql的图像时显示标题
- 如何使用 bootstrap3 和 php 突出显示标题中的活动页面
- chart js:如何显示标题或标签
- 从下拉菜单选项中显示“标题”标签
- 如何在可展开菜单中正确显示标题
- Spotify 应用程序 - 列表不显示播放列表的曲目,只显示标题
- 在 asp.net 中使用 javascript 显示标题属性消息
- 引导灯箱:显示标题属性中的图像说明
- 在浏览器的选项卡中显示标题
- 如何按焦点在 HTML 元素上显示标题
- 加载随机背景音乐并显示标题
- 如何使用ES6 angular 1.3控制器显示标题
- 在图像下方垂直和水平居中显示标题
- 如何使用d3.js在SVG图表上居中显示标题
- 在网页上显示标题或替换文本
- 如何有一个淘汰网格显示标题和基于下拉结果的数据
- 谷歌地图显示标题的信息框
- 仅在切换类时显示标题和段落
- JQuery在图像悬停显示标题标签内容,可能的
- JQuery周日历:在初始加载时只显示标题