点击这里查看效果

以下是代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS全屏漂浮广告-柯乐义</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><a href="http://keleyi.com/a/bjac/ara6jk5h.htm" target="_blank">原文</a></div>

 </div>

 <div id="roll">我是广告<br />keleyi.com</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>

转载自：http://keleyi.com/a/bjac/ara6jk5h.htm

http://www.cnblogs.com/jihua/p/webfront.html

JS全屏漂浮广告、移入光标停止移动的更多相关文章

  1. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  2. [HTML]JS全屏代码

    video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...

  3. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  4. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  5. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  6. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  7. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  8. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  9. jQuery fullPage.js 全屏滚动

    fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...

随机推荐

  1. SQL语句来查询今天、昨天、7天内、30天的数据，经典！

    ---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...

  2. Android沉浸式通知栏设计

    转载博客:http://www.2cto.com/kf/201503/381348.html Android4.4新特性,系统状态栏一体化. 实现的步骤主要有以下几点: 1.android4.4 以上 ...

  3. Description Resource Path Location Type Error executing aapt: Return code -1073741819 Client line 1

    Logcat报错:Description    Resource    Path    Location Type Error executing aapt: Return code -1073741 ...

  4. iOS开发之山寨版新浪微博小结

    在之前的博客IOS开发之新浪围脖中获取微博的内容是使用我自己的access_token来请求的数据,那么如何让其他用户也能登陆并获取自己的微博内容呢?接下来就是OAuth和SSO出场的时候啦.OAut ...

  5. CRL 版本2.2.0.0发布

    重要更新: 增加了关联查询 优化了缓存查找效率 关联查询有以下两种形式 返回Select结果,结果为动态对象 将结果附加给当前对象索引值 关联查询有累加效果,可关联多个表可通过匿名对象指定返回的别名, ...

  6. phpstorm 63342默认端口怎么修改

    phpstorm进行网页调试的时候,默认是加端口号63342,在配置本地php环境的时候默认端口不一定是63342这个,更多的是系统默认的端口号80,那么问题就出现了,如何在phpstorm中将633 ...

  7. MySQL学习（一）MySQLWorkbench（MySQL可视化工具）下载，安装，测试连接，以及注意事项

    PS:MySQLWorkbench是MYSQL自带的可视化工具,无论使用哪个可视化工具,其实大同小异,如果想以后走的更远的话,可以考虑使用命令行操作数据库MYSQL.可视化工具让我们初学者更能理解数据 ...

  8. Myeclipse无法开启Servers视图解决办法

    IDE报错如下:  解决办法:1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runtime/.sett ...

  9. （2）从实际项目谈起，基于MEF的插件框架之总体设计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.MEF框架简介 MEF的全称是Managed Extensibil ...

  10. Solr学习总结（六）SolrNet的高级用法（复杂查询，分页，高亮，Facet查询）

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...