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

复制代码 代码如下:

<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();

时间: 2024-10-02 02:50:13

Javascript实现带关闭按钮的网页漂浮广告代码_javascript技巧的相关文章

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

 带有关闭功能的漂浮图片的实现方法有很多,下面为大家介绍下使用Javascript是如何实现的,喜欢的额朋友可以了解下  代码如下: <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title>带关闭按钮的网页漂浮广告代码</title>  </head>  <bo

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码_javascript技巧

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

js实现随屏幕滚动的带缓冲效果的右下角广告代码_javascript技巧

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

JS实现弹性漂浮效果的广告代码_javascript技巧

本文实例讲述了JS实现弹性漂浮效果的广告代码.分享给大家供大家参考.具体如下: 这里介绍一款JS弹性漂浮广告代码,碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去,不停的在网页上漂来漂去,漂浮广告代码是很早时候就有的代码了,使用广泛,而且做为广告来说,好像效果还不错,因为它在不停的动,让人在视觉上感觉到有一种吸引力.其中的JS代码你可以扣出来保存在一个单独的JS文件中,使用时调用即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mo

详细解析网页漂浮广告代码的含义

广告|网页 网页漂浮广图片特效,这种特效我们总是很喜欢,鼠标指向图片后图片停止移动. <div id="ad" style="position:absolute"><a href="http://www.webjx.com"><img src="/UploadPic/2007-7/200777163350746.jpg" border="0"></a><

详解网页漂浮广告代码的含义

网页漂浮广图片特效,这种特效我们总是很喜欢,鼠标指向图片后图片停止移动. <pre><div id="ad" style="position:absolute"><a href="http://www.cnwebshow.com"><img src="/img/200406301.jpg" border="0"></a></div>&l

js实现跟随鼠标移动且带关闭功能的图片广告实例_javascript技巧

本文实例讲述了js实现跟随鼠标移动且带关闭功能的图片广告.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

JS实现网页右侧带动画效果的伸缩窗口代码_javascript技巧

本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码.分享给大家供大家参考,具体如下: 这是一款带缓冲效果的网页右侧固定伸缩窗口,点击带颜色的区域,浮动的层窗口就会伸缩出来,再次点击则缩进去.无jQuery,完全JavaScript实现的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

javascript html实现网页版日历代码_javascript技巧

本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&