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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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中的实现trim函数代码
2007/03/19 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php-msf源码详解
2017/12/25 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python性能优化的20条建议
2014/10/25 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python的logging模块基本用法
2020/12/24 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
幼儿教师个人总结
2015/02/05 职场文书
机关工会工作总结2015
2015/05/26 职场文书