像SINA这样的大型网站，在两边有随着网页自动上下的层的广告应该怎样做？
在sina这种大型网站，网页两边有很多广告，这种层可以随着我们上下拖动网页而上下移动，这种效果应该怎样做？谢谢 问题点数：20、回复次数：7Top
1 楼ttyp（@http://www.cnblogs.com/ttyp/）回复于 2004-11-02 10:21:46 得分 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body onscroll="document.all.dis.style.top = document.body.scrollTop+50;">
<br>
<br><br><br><br><br>
<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br>
<div style="position:absolute;top:50px;border:1px solid red;width:100px;height:50px;" id="dis">word</div>
</body>
</html>
Top
2 楼webmm（一笑而过）回复于 2004-11-02 10:32:00 得分 5
如果是不动的广告，有些不过是在两边做flash罢了~~~
一般页面两边可以动的广告用javascript做：
思路是图层随滚动条的上下移动而移动~~~
网上大把代码~~~~，比如：
<div id="Layer1" style="position:absolute; width:100px; height:100px; z-index:10; left: 5px; top: 50px; background-color: #FFFFFF; layer-background-color: #FF0000; border: 1px none #000000;">
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td>我就是广告层，哈哈</td>
</tr>
</table>
</div>
在代码任意地方加：
<SCRIPT language=JavaScript>
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent); if(IE) document.all.Layer1.style.pixelTop += percent;
if(NS) document.Layer1.top += percent; lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.Layer1.style.pixelLeft += percent;
if(NS) document.Layer1.left += percent;
lastScrollX = lastScrollX + percent;
}
} <!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.Layer1.pageX;
stalkery = document.Layer1.pageY;
stalkerwidth = document.Layer1.clip.width;
stalkerheight = document.Layer1.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
} function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("Layer1") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.Layer1;
StalkerTouchedX = e.pageX-document.Layer1.pageX;
StalkerTouchedY = e.pageY-document.Layer1.pageY;
} }
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1); </SCRIPT>
Top
3 楼yb2008（中科商务网--ZKE360.COM）回复于 2004-11-02 11:03:18 得分 5
<SCRIPT FOR=window EVENT=onload LANGUAGE="JavaScript">
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:114px; height:80px; z-index:20; visibility:hidden;; left: 350px; top: 200px'>
<a href="shop/index.asp" target="_blank"><img src="gif/025.gif" width="113" height="58" border="0"></a>
</div>Top
4 楼yong1268（yong）回复于 2004-11-02 16:51:40 得分 0
upTop
5 楼zzzxxxcccvvv（zxc）回复于 2004-11-02 17:43:32 得分 0
打开它的源代码看一下Top
6 楼believebowps（I love .NET）回复于 2004-11-03 10:36:53 得分 0
两位给我的代码确实不错，不过有一点，我在左右都设置一个广告，那么随着桌面分辨率的改变，网页居中，那么左右两个广告层怎样随着这个改变而改变，就是说，我需要的是相对网页定位，不是绝对定位。网页居中后，两个广告也随着移动，但相对网页来说，他们左右的位置并没有改变。Top
7 楼lingyun2111（凌云）回复于 2004-11-03 11:41:40 得分 5
新建一个JS文件drop.js,代码如下:
//常数定义
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; //最后离左边距离的负值
lastScrollY =0; //最后离顶部的高度的负值
//----------------------start fun秒执行一次
function heartBeat(id1,id2) {
diffY = document.body.scrollTop;
diffX = document.body.scrollLeft;
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
id1.style.pixelTop += percent;
id2.style.pixelTop += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
id1.style.pixelTop += percent;
id2.style.pixelTop += percent;
lastScrollX = lastScrollX + percent;
}
}
//-----------------------end fun
scr=screen.width
left_1=(scr>800)?10:145
right_1=(scr>800)?880:580
//左侧图片
document.write("<DIV id=f1 style='left: "+left_1+"px; top: 215px; POSITION: absolute;'><a href=glxj.html target=_blank><img src=ad/glxj.gif border=0 width=120 height=125></a></div>")
//右侧图片
document.write("<DIV id=f2 style='left: "+right_1+"px; top: 215px; POSITION: absolute;'><a href=http://www.cney.net/art_data.asp?id=78 target=_blank><img src=ad/yydb.gif border=0 width=150 height=47></a></div>")
action = window.setInterval("heartBeat(f1,f2)",50);
然后在你想要放的页面上加上这段代码就搞定了
<script src="drop.js"></script>
Top
