来写一个讨人厌牛皮癣的广告

我们在浏览网页的时候，有时会看到一直在屏幕动的很烦人的广告，它会游走于整个页面，直到碰到边缘框才换方向。我称它为牛皮癣广告。

下面我们用js原生来写这样一个牛皮癣的广告。

Html代码

<img src="img/img04.jpg" id='demo' class="demo" alt="" />  <!-- 随便找一个图片 -->

js代码

<script>
function $(str) {
return document.getElementById(str);
}

function move() {

//0 代表向右移动 1代表向左移动
var leftState = 0;
var topState = 0;

setInterval(function() {
var left = parseInt($('demo').style.left);
left = isNaN(left) ? 0 : left;

var winW = window.innerWidth;
//如果左移动的下次距离 大于浏览器的宽度
//左边距-图片的宽度+下次运行的距离>浏览器宽度
if (left - 2 > 0 && leftState == 1) {
$('demo').style.left = left - 2 + 'px';
} else if ((left + 100 + 2) < winW && leftState == 0) {
$('demo').style.left = left + 2 + 'px';
} else if ((left + 100 + 2) >= winW && leftState == 0) {
leftState = 1;
} else if (left - 2 <= 0 && leftState == 1) {
leftState = 0;
}

var top = parseInt($('demo').style.top);
top = isNaN(top) ? 0 : top;
var winH = window.innerHeight;
//如果左移动的下次距离 大于浏览器的宽度
//左边距-图片的宽度+下次运行的距离>浏览器宽度
if (top - 2 > 0 && topState == 1) {
$('demo').style.top = top - 2 + 'px';
} else if ((top + 100 + 2) < winH && topState == 0) {
$('demo').style.top = top + 2 + 'px';
} else if ((top + 100 + 2) >= winH && topState == 0) {
topState = 1;
} else if (top - 2 <= 0 && topState == 1) {
topState = 0;
}
}, 20)
}

window.onload = function() {
move();
}
</script>

var left = parseInt($('demo').style.left);

left是左移动的距离，console.log的结果一开始是NaN，后面是不同的数字。如下图:



window.innerWidth返回窗口的文档显示区的宽度。

window.innerheight返回窗口的文档显示区的高度。

更多window对象相关可参考Window 对象

其实原理很简单，就是利用了广告与窗口的距离，与窗口的宽度相比较，从而确定下一步广告与窗口的距离，形成移动的效果。

最后我们来看一下效果：