现在很多网站首页两边都有浮动广告，，请问这是怎样做出来的？？
＜SCRIPT language=＂JavaScript＂ type=＂text/javascript＂＞
var delta=0.15
var collection;
function floaters() {
this.items = [>;
this.addItem = function(id,x,y,content)
{
document.write(';＜DIV id='; id '; style=＂Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'; (typeof(x)==';string';？eval(x):x) ';;top:'; (typeof(y)==';string';？eval(y):y) ';＂＞'; content ';＜/DIV＞';);
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length> = newItem;
}
this.play = function()
{
collection = this.items
setInterval(';play()';,10);
}
}
function play()
{
for(var i=0;i＜collection.length;i )
{
var followObj = collection.object;
var followObj_x = (typeof(collection.x)==';string';？eval(collection.x):collection.x);
var followObj_y = (typeof(collection.y)==';string';？eval(collection.y):collection.y);
if(followObj.offsetLeft!=(document.body.scrollLeft followObj_x)) {
var dx=(document.body.scrollLeft followObj_x-followObj.offsetLeft)*delta;
dx=(dx＞0？1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft dx;
}
if(followObj.offsetTop!=(document.body.scrollTop followObj_y)) {
var dy=(document.body.scrollTop followObj_y-followObj.offsetTop)*delta;
dy=(dy＞0？1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop dy;
}
followObj.style.display = ';';;
}
}
var theFloaters = new floaters();
theFloaters.addItem(';followDiv1';,';document.body.clientWidth-110';,50,';＜a href=http://www.now.net.cn target=_blank＞＜img src=http://b.todayisp.com/100x100_now.gif width=100 height=100 border=0＞＜/a＞＜br＞＜br＞＜a href=http://www.idc2012.com/index2.asp target=_blank＞＜img src=http://b.todayisp.com/100x100_now.gif width=100 height=100 border=0＞＜/a＞＜br＞';);
theFloaters.addItem(';followDiv2';,10,50,';＜a href=http://www.6661.com target=_blank＞＜img src=http://www.6661.com/qz158/7866.gif width=100 height=100 border=0＞＜/a＞＜br＞＜br＞＜a href=http://ad.114.com.cn/mycodes.html target=_blank＞＜img src=http://b.todayisp.com/100x100_now.gif width=100 height=100 border=0＞＜/a＞＜br＞';);
theFloaters.play();
＜/SCRIPT＞
谢谢老大
要做出浮动式广告的效果并不困难，如果你有JS基础的可以自己写一个，如果连写都懒得写的话，到网上下载一个特效工具，按提示粘贴一下代码就OK。不过，想要真正了解它是怎样做出来的，则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。
以下这段代码可放在＜body＞＜/body＞之间，其间我加入了一些注释（即“//”后的文字及“＜!—”“--＞”之间的文字）。
＜SCRIPT FOR=window EVENT=onload LANGUAGE=＂JScript＂＞
initAd();//载入页面后，调用函数initAd()
＜/SCRIPT＞
＜script language=＂JScript＂＞
＜!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后，广告层相对于固定后的y方向位置
document.all.AdLayer.style.visibility = ';visible';//设置层为可见
MoveLayer(';AdLayer';);//调用函数MoveLayer()
}
function MoveLayer(layerName) {
var x = 600;//浮动广告层固定于浏览器的x方向位置
var y = 300;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop y - diff;
eval(＂document.all.＂ layerName ＂.style.posTop = y＂);
eval(＂document.all.＂ layerName ＂.style.posLeft = x＂);//移动广告层
setTimeout(＂MoveLayer(';AdLayer';);＂, 20);//设置20毫秒后再调用函数MoveLayer()
}
//--＞
＜/script＞
＜!--下面为一个ID为AdLayer的层（如ID名不为AdLayer，上面MoveLayer()内的AdLayer也要作相应修改），包括一张带链接的图片--＞
＜div id=AdLayer style=';position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px';＞
＜a href=＂http://www.5dmedia.com/bbs＂＞＜img src=';../qqkk2000.gif'; border=＂0＂ height=＂60＂ width=＂60＂＞＜/a＞
＜/div＞
在这里，你可以设置x、y的值来设定所固定层的位置，改变setTimeout(＂MoveLayer(';AdLayer';);＂, 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是，使用的图片最好为透明背景的gif图，以使图片的背景颜色不至于遮住后面的的内容。
切记，要慎用浮动式广告，考虑使用特效的同时，千万要考虑到浏览者的感觉，不能滥用哦！ |
|
设为首页
加入收藏
联系我们
打印本文 
返回顶部 
加入收藏 
关闭窗口
