学做全屏浮动广告 JS 原生代码
2017-03-22 19:58
477 查看
<!DOCTYPE HTML> <html><head><title>JS全屏漂浮广告</title> <meta http-equiv=Content-Type content="text/html; charset=gbk"> <style type=text/css> div#roll { width: 100px; color: #fff; position: absolute; height: 100px; background-color: #000 } </style> <body> <H2>JS全屏漂浮广告,移入光标停止移动</H2> <div id="roll">我是广告</div> <script type=text/javascript> 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 () { 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) }; ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) }; </script> </body></html>
相关文章推荐
- 全屏浮动广告代码
- HTML5全屏来袭:支持浏览器原生全屏的JS代码
- 建站代码====js两侧浮动广告
- 对联浮动广告JS代码不滚动不浮动的解决方法
- 又一个不错的js浮动广告代码
- js 浮动广告代码
- Kad -- 自己写的JS浮动广告代码封装器 支持FF/IE
- 原生js全屏广告
- 对联浮动广告JS代码不滚动不浮动的解决方法
- JS导航浮动跟踪,浮动广告,跟踪广告代码
- 全屏浮动广告代码
- 又一个不错的js浮动广告代码
- 浮动广告最简单代码js
- 浮动广告代码在网页两侧
- 浮动广告代码在网页两侧
- 浮动广告代码在网页两侧
- 浮动广告代码在网页两侧
- 常用JS网页广告代码
- [JS代码]常用JS网页广告代码
- 浮动广告代码在网页两侧