随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

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

点击这里查看效果

以下是代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS全屏漂浮广告-柯乐义</title>
 6 <style type="text/css">
 7 div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}
 8 </style>
 9 </head>
10 
11 <body>
12 <div>
13 <div><h2>JS全屏漂浮广告，移入光标停止移动·柯乐义</h2><a href="http://keleyi.com/a/bjac/ara6jk5h.htm" target="_blank">原文</a></div>
14 </div>
15 <div id="roll">我是广告<br />keleyi.com</div>
16 <script type="text/javascript">
17 var ggRoll = {
18 roll: document.getElementById("roll"),
19 speed: 20,
20 statusX: 1,
21 statusY: 1,
22 x: 100,
23 y: 300,
24 winW: document.documentElement.clientWidth - document.getElementById("roll").offsetWidth,
25 winH: document.documentElement.clientHeight - document.getElementById("roll").offsetHeight,
26 Go: function () {
27 this.roll.style.left = this.x + 'px';
28 this.roll.style.top = this.y + 'px';
29 
30 this.x = this.x + (this.statusX ? -1 : 1)
31 if (this.x < 0) { this.statusX = 0 }
32 if (this.x > this.winW) { this.statusX = 1 }
33 
34 this.y = this.y + (this.statusY ? -1 : 1)
35 if (this.y < 0) { this.statusY = 0 }
36 if (this.y > this.winH) { this.statusY = 1 }
37 }
38 }
39 var interval = setInterval("ggRoll.Go()", ggRoll.speed);
40 ggRoll.roll.onmouseover = function () { clearInterval(interval) };
41 ggRoll.roll.onmouseout = function () { interval = setInterval("ggRoll.Go()", ggRoll.speed) };
42 
43 </script>
44 </body>
45 </html>