|
代码：
<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> |
|
公众号
