JS全屏漂浮广告、移入光标停止移动

发布时间:2019-10-16编辑:脚本学堂
分享一例js实现全屏漂浮广告的代码,当移入光标时漂浮会停止移动,效果不错,有需要的朋友参考下吧。

本节内容:
JS全屏漂浮广告

例子:
 

复制代码 代码示例:
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS全屏漂浮广告-www.jb200.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 />jb200.com</div> 
<script type="text/javascript">
/**
* JS全屏漂浮广告代码
* by www.jb200.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>