漫游于网络之间 你会发觉 互联网不但是信息的海洋 也是广告的海洋 除了普通的GIF Banner Flash外 浮动广告也是时下网上较为流行的广告形式之一 当你拖动浏览器的滚动条时 这种在页面上浮动的广告 可以跟随屏幕一起移动 尽管这种效果对于广告展示有相当的实用价值 但对浏览你网页的人来讲 这则是个既妨碍阅读 又影响阅读兴趣的东西 因此一定不能滥用 不过 如果你能善用的话 它就能发挥出极大的作用
要做出浮动式广告的效果并不困难 如果你有JavaScript基础的可以自己写一个 如果连写都懒得写的话 到网上下载一个特效工具 按提示粘贴一下代码就OK 不过 想要真正了解它是怎样做出来的 则需要掌握一些JavaScript知识了 这里向大家介绍一下简单的浮动广告做法
以下这段代码可放在<body></body>之间 其间我加入了一些注释（即 // 后的文字及 <！— ——>之间的文字）
<SCRIPT FOR=window EVENT=onload LANGUAGE= JavaScript >initAd（） //载入页面后 调用函数initAd（）
</SCRIPT><script language= JavaScript ><！——function initAd（） { document all AdLayer style posTop = //设置onLoad事件激发以后 广告层相对于固定后的y方向位置document all AdLayer style visibility = visible //设置层为可见MoveLayer（ AdLayer ） //调用函数MoveLayer（）
} function MoveLayer（layerName） { var x = //浮动广告层固定于浏览器的x方向位置var y = //浮动广告层固定于浏览器的y方向位置var diff = （document body scrollTop + y document all AdLayer style posTop）* var y = document body scrollTop + y diff eval（ document all + layerName + style posTop = y ） eval（ document all + layerName + style posLeft = x ） //移动广告层setTimeout（ MoveLayer（ AdLayer ） ） //设置 毫秒后再调用函数MoveLayer（）
} //——></script><！——下面为一个ID为AdLayer的层（如ID名不为AdLayer 上面MoveLayer（）内的AdLayer也要作相应修改） 包括一张带链接的图片——><div id=AdLayer style= position absolute width px height px z index visibility hidden left px top px ><a >><img src= ……/qqkk gif border= height= width= ></a></div>在这里 你可以设置x y的值来设定所固定层的位置 改变setTimeout（ MoveLayer（ AdLayer ） ）中 的值为你希望调用MoveLayer（）的时间间隔 还有要注意的是 使用的图片最好为透明背景的GIF图 以使图片的背景颜色不至于遮住后面的的内容
lishixinzhi/Article/program/Java/JSP/201311/19409
漂浮广告用如下代码：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>js实现可关闭的自由漂浮广告代码_js特效_特效代码_www.xunmzy.com</title>
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
<style type="text/css">
#img1{width:autoposition:absolutetop:43pxleft:2pxz-index:10}
#img1 div{width:autotext-align:rightfont-size:12px}
#img1 div a:link{text-decoration:none}
#img1 div a:hover{color:redtext-decoration:none}
#img1 img{width:autoborder:1px solid black}
p{margin-top:50pxtext-align:center}
</style>
</head>
<body>
<div id="img1" onmouseover="pause_resume()" onmouseout="pause_resume()">
<div><a href="javascript:void(0)" onclick="closediv()" title="点击关闭">关闭</a></div>
<a href="https://www.xunmzy.com/" target="_blank"><img src="images/logo_png.png" alt="js实现可关闭的自由漂浮广告代码"></a>
</div>
<p>js代码可关闭的自由漂浮的图片广告特效</p>
<script type="text/javascript">
var xPos = 300
var yPos = 200
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
var divid = img1 //浮动DIV的ID.
divid.style.top = yPos
function changePos(){
width = document.body.clientWidth
height = document.body.clientHeight
Hoffset = divid.offsetHeight
Woffset = divid.offsetWidth
divid.style.left = xPos + document.body.scrollLeft
divid.style.top = yPos + document.body.scrollTop
if(yon){yPos = yPos + step}else{yPos = yPos - step}
if(yPos < 0){yon = 1yPos = 0}
if(yPos >= (height - Hoffset)){yon = 0 yPos = (height - Hoffset)}
if(xon){xPos = xPos + step}else{xPos = xPos - step}
if(xPos < 0){xon = 1xPos = 0}
if(xPos >= (width - Woffset)){xon = 0 xPos = (width - Woffset)}
}
function start(){
divid.visibility = "visible"
interval = setInterval('changePos()',delay)
}
function pause_resume(){
if(pause){
clearInterval(interval)
pause = false}
else{
interval = setInterval('changePos()',delay)
pause = true
}
}
function closediv(){
clearInterval(interval)
divid.style.display = "none"
}
start()
</script>
</body>
</html>
把需要改的地方改了就可以了，
漂浮广告也分很多种的啊，比如：一个广告图，按一定的路径在屏幕上动~~（对网站的内容，有一定遮挡，并且貌似现在会被屏蔽？反正看到的很少了）
或者：左右两侧对联广告，分2种：一、带关闭按钮的广告图；二、d出式的：开始左侧有个很小的按钮（提示文字），鼠标点击或滑过，就显示整张的广告图
或者：右下角广告：有能放视频的，或者放文字的，或者d出图片的。。。
总之漂浮悬浮广告，很多。
我也是菜鸟，想要达到效果，平时都用2种方法：
1、看到哪个网站漂浮广告不错，把网页保存，然后一个个的删除无关代码，删除一段就刷新下测试效果直到最精简，剩下的代码加到自己的网页里，还可能要改下CSS
2、去网上搜索；JS漂浮广告代码 漂浮广告代码 网页特效 这些词，会找到很多，一般都有效果预览，很简单的
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）