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

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

Html代码

"img/img04.jpg" id='demo' class="demo" alt="" />  

js代码

var left = parseInt($('demo').style.left);
left是左移动的距离,console.log的结果一开始是NaN,后面是不同的数字。如下图:
来写一个讨人厌牛皮癣的广告_第1张图片

window.innerWidth返回窗口的文档显示区的宽度。
window.innerheight返回窗口的文档显示区的高度。
更多window对象相关可参考Window 对象

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

最后我们来看一下效果:

来写一个讨人厌牛皮癣的广告_第2张图片

你可能感兴趣的:(技术类)