前言

漂浮广告非常简单也是老案例了，在网页的设计中可直接拿去用，原理都是我之前文章所讲到的，如果有什么不明白的可以看看我之前的文章，仅供参考学习。

一、漂浮广告案例

我在这个案例里面加了一些其他的操作，例如：移入时广告静止，移出时广告漂浮，点击一次跳转到另一个页面，点击俩次广告消失。

代码如下（示例）：

    <style type="text/css">#div1 {width: 300px;height: 300px;padding: 0;margin: 0;position: fixed;left: 0;top: 0;}#div1 img {width: 300px;height: 300px;}</style><script>window.onload = function () {//获取元素var div1 = document.getElementById('div1');var w = document.documentElement.clientWidth;var h = document.documentElement.clientHeight;var gox = 1;var goy = 1;var a=0;//广告漂浮function move() {var x = div1.offsetLeft;var y = div1.offsetTop;if (x > w - 300 || x < 0) gox = -gox;div1.style.left = x + (10 * gox) + 'px';if (y > h - 300 || y < 0) goy = -goy;div1.style.top = y + (10 * goy) + 'px';}//漂浮定时器var timer = setInterval(move, 30);//移入移出时广告的浮动div1.onmouseover = function () {clearInterval(timer);}div1.onmouseout = function () {timer = setInterval(move, 30);}//点击一次跳转到另一个页面，点击两次广告消失div1.onclick = function() {if (a === 0) {var neww = window.open('_blank');neww.location = "http://www.baidu.com";a++;} else {this.style.display = "none";}}}</script>
</head>
<body>
<div id="div1"><img src="1.png" alt=""/>
</div>
</body>