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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
理解jQuery stop()方法
Nov 21 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
vue中v-model对select的绑定操作
Aug 31 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值mysql操作类
2016/06/29 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Python和php通信乱码问题解决方法
2014/04/15 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
kali中python版本的切换方法
2019/07/11 Python
原生python实现knn分类算法
2019/10/24 Python
np.random.seed() 的使用详解
2020/01/14 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
公司薪酬管理制度
2014/01/31 职场文书
单位委托书怎么写
2014/09/21 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android