当前位置 博文首页 > cai niaoyihao_的博客:js漂浮广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>漂浮广告</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
div#roll {
width: 120px;
height: 100px;
text-align: center;
line-height: 100px;
/* background: radial-gradient(red, orange, yellow, green, blue, purple); */
background: #999;
color: #ffd;
position: absolute;
}
</style>
</head>
<body>
<div id="roll"><a>点我试试</a></div>
<script type="text/javascript">
var ggRoll = {
roll: document.getElementById("roll"),
speed: 30,
statusX: 1,
statusY: 1,
x: 100,
y: 300,
winW: document.documentElement.clientWidth - roll.offsetWidth,
winH: document.documentElement.clientHeight - roll.offsetHeight,
Go: function() {
this.roll.style.left = this.x + 'px';
this.roll.style.top = this.y + 'px';
this.x = this.x + (this.statusX ? -1 : 1)
if (this.x < 0) {
this.statusX = 0
}
if (this.x > this.winW) {
this.statusX = 1
}
this.y = this.y + (this.statusY ? -1 : 1)
if (this.y < 0) {
this.statusY = 0
}
if (this.y > this.winH) {
this.statusY = 1
}
}
}
var interval = setInterval("ggRoll.Go()", ggRoll.speed);
ggRoll.roll.onmouseover = function() {
clearInterval(interval);
document.querySelector('#roll').innerHTML = "点其他位置试试"
};
ggRoll.roll.onmouseout = function() {
interval = setInterval("ggRoll.Go()", ggRoll.speed);
document.querySelector('#roll').innerHTML = "再点我试试"
};
</script>
</body>
</html>
??速度,初始位置,移动幅度等可自行配置。
??可根据实际需求使用点击、鼠标移入移出等事件进行修改。
纪念一下513,过几天就找不到自己了:
标签:悬浮广告,JavaScript
更多演示案例,查看 案例演示
欢迎评论留言!
cs