js全屏漂浮移动广告

来源:赵克立博客 分类: HTML5 标签:js特效发布时间:2014-04-29 06:04:39最后更新:2017-08-31 15:34:25浏览:1392
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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>

微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python