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 相关文章推荐
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jsTree使用记录实例
Dec 01 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
three.js实现圆柱体
Dec 30 Javascript
JavaScript this关键字的深入详解
Jan 14 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php实现的http请求封装示例
2016/11/08 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python输入错误密码用户锁定实现方法
2017/11/27 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
租房协议书
2014/09/12 职场文书
小学校长开学致辞
2015/07/29 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
ipad隐藏软件app图标方法
2022/04/19 数码科技