js全屏漂浮移动广告
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-08-31 15:34:25
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
在w3c标准下用js的时候document.body.scrollTop是不兼容的请用document.documentElement.scrolltop
并且给元素赋值的时候也要在后面加上px 不然出不报错也没有达到效果,因为scrollTop这个值是取出来是0 或是赋值也是没有作用的,
必须加上px下面是我调试并修正好的一个js漂浮代码,大家可以下载下来直接使用。
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js漂浮广告-赵克立博客</title> <style> #img1{ z-index:100; left:2px; width:59px; position:absolute; top:43px;background:red; height:61px; visibility:visible;border:solid 1px #ccc;} </style> </head> <body> <DIV id=img1><a href="http://www.zhaokeli.com" target="_blank"></a></DIV> <SCRIPT> (function(){ var xPos = 300; var yPos = 200; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; img1.style.top = yPos; window.changePos=changePos;//把changePos放到全局 function changePos() { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; Hoffset = img1.offsetHeight; Woffset = img1.offsetWidth; img1.style.left = xPos + document.documentElement.scrollLeft+'PX'; img1.style.top = yPos + document.documentElement.scrollTop+'PX'; if (yon) {yPos = yPos + step;} else {yPos = yPos - step;} if (yPos < 0) {yon = 1;yPos = 0;} if (yPos >= (height - Hoffset)) {yon = 0;yPos = (height - Hoffset);} if (xon) {xPos = xPos + step;} else {xPos = xPos - step;} if (xPos < 0) {xon = 1;xPos = 0;} if (xPos >= (width - Woffset)) {xon = 0;xPos = (width - Woffset); } } function start() { img1.visibility = "visible"; interval = setInterval('changePos()', delay); } function pause_resume() { if(pause) { clearInterval(interval); pause = false;} else { interval = setInterval('changePos()',delay); pause = true; } } start(); })(); </SCRIPT> </body> </html>