js实现全屏漂浮广告移入光标停止移动


Posted in Javascript onDecember 02, 2013
<!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></div>
</div>
<div id="roll">我是广告<br />www.3water.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>
Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 #Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 #Javascript
关于js中for in的缺陷浅析
Dec 02 #Javascript
js验证整数加保留小数点的简单实例
Dec 02 #Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 #Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 #Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 #Javascript
You might like
php中fgetcsv()函数用法实例
2014/11/28 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python决策树之C4.5算法详解
2017/12/20 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
先进个人事迹材料
2014/01/25 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
php png失真的原因及解决办法
2021/11/17 PHP