JS全屏漂浮广告、移入光标停止移动
发布时间：2015-03-20 编辑：jiaochengji.com
分享一例js实现全屏漂浮广告的代码，当移入光标时漂浮会停止移动，效果不错，有需要的朋友参考下吧。
本节内容：
JS全屏漂浮广告
例子：
复制代码 代码示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS全屏漂浮广告-www.jiaochengji.com</title>
<style type="text/css">
div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}
</style>
</head>
<body>
<div>
<div><h2>JS全屏漂浮广告，移入光标停止移动</h2>
</div>
<div id="roll">全屏漂浮广告的内容部分，教程集倾情提供！！！<br />jquerycn.cn</div>
<script type="text/javascript">
/**
* JS全屏漂浮广告代码
* by www.jiaochengji.com
*/
var ggRoll = {
roll: document.getElementById("roll"),
speed: 20,
statusX: 1,
statusY: 1,
x: 100,
y: 300,
winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
Go: function () {
thisthis.roll.style.left = this.x + 'px';
thisthis.roll.style.top = this.y + 'px';
thisthis.x = this.x + (this.statusX ? -1 : 1)
if (this.x < 0) { this.statusX = 0 }
if (this.x > this.winW) { this.statusX = 1 }
thisthis.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) };
ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS全屏漂浮广告-www.jiaochengji.com</title>
<style type="text/css">
div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}
</style>
</head>
<body>
<div>
<div><h2>JS全屏漂浮广告，移入光标停止移动</h2>
</div>
<div id="roll">全屏漂浮广告的内容部分，教程集倾情提供！！！<br />jquerycn.cn</div>
<script type="text/javascript">
/**
* JS全屏漂浮广告代码
* by www.jiaochengji.com
*/
var ggRoll = {
roll: document.getElementById("roll"),
speed: 20,
statusX: 1,
statusY: 1,
x: 100,
y: 300,
winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
Go: function () {
thisthis.roll.style.left = this.x + 'px';
thisthis.roll.style.top = this.y + 'px';
thisthis.x = this.x + (this.statusX ? -1 : 1)
if (this.x < 0) { this.statusX = 0 }
if (this.x > this.winW) { this.statusX = 1 }
thisthis.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) };
ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };
</script>
</body>
</html>
您可能感兴趣的文章：
js全屏漂浮广告代码 移入光标停止移动
JS全屏漂浮广告、移入光标停止移动
js随机漂浮广告代码示例
js漂浮广告代码 js弹性漂浮广告
JS悬浮移动窗口(悬浮广告)的特效代码
js实现漂浮广告效果的代码
深入解析JavaScript操纵窗口的方法
漂浮广告的js代码 js图片漂浮特效
js漂浮广告代码大全
JS全屏漂浮广告代码
[关闭]