Javascript实现带关闭按钮的网页漂浮广告代码


Posted in Javascript onJanuary 12, 2014
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>带关闭按钮的网页漂浮广告代码</title> 
</head> 
<body> 
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="right"> 
<a href="#" target="_blank"><img border="0" src="图片路径" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a> 
<span style="CURSOR:hand;color:red;font-weight:bold" onclick="clearInterval(interval);img.style.visibility = 'hidden'">X</span> 
</div> 
<script language=javascript src=ff.js> </script> 
</body> 
</html>

ff.js代码
var xPos = 20; 
var yPos = document.body.clientHeight; 
var step = 1; 
var delay = 30; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img.style.top = yPos; 
function changePos() { 
width = document.body.clientWidth; 
height = document.body.clientHeight; 
Hoffset = img.offsetHeight; 
Woffset = img.offsetWidth; 
img.style.left = xPos + document.body.scrollLeft; 
img.style.top = yPos + document.body.scrollTop; 
if (yon) { 
yPos = yPos + step; 
} 
else { 
yPos = yPos - step; 
} 
if (yPos < 0) { 
yon = 1; 
yPos = 0; 
} 
if (yPos >= (height - Hoffset)) { 
yon = 0; 
yPos = (height - Hoffset); 
} 
if (xon) { 
xPos = xPos + step; 
} 
else { 
xPos = xPos - step; 
} 
if (xPos < 0) { 
xon = 1; 
xPos = 0; 
} 
if (xPos >= (width - Woffset)) { 
xon = 0; 
xPos = (width - Woffset); 
} 
} 
function start() { 
img.style.visibility = "visible"; 
interval = setInterval('changePos()', delay); 
} 
start();
Javascript 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python解析xml文件实例分析
2015/05/27 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
个人培训自我鉴定
2014/03/28 职场文书
小学生操行评语
2014/04/22 职场文书
职务说明书范文
2014/05/07 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
青春雷锋观后感
2015/06/10 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书