Filed under: 实践与研究 |
Posted on November 11th, 2008 by 肥龙龙 | 177 views
我们在网站中会经常用到随页面漂浮的广告，但是在符合w3c的情况下，很多js广告漂浮的代码都失效了，问题在于使用了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
作为网页的声明，那么如何解决呢，方法有两个：
1、当然是删除这段声明。
2、删除声明不是最佳的解决方案，导致失效的其实只是现有的js不支持标准而已，改成支持标准的就行了。
关键点为：
document.body.scrollTop属性在标准下永远为0，因此body Scroll永远也不会引发。只需要用document.documentElement.scrollTop 替代 document.body.scrollTop即可。
附例子代码：
function initEcAd() {
document.all.AdLayer2.style.posTop = -200;
document.all.AdLayer2.style.visibility = 'visible'
MoveRightLayer('AdLayer2');
}
function MoveRightLayer(layerName) {
var x = 10;
var y = 267;// 右侧广告距离页首高度
var diff = (document.documentElement.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;
var y = document.documentElement.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = "+y);
eval("document.all." + layerName + ".style.posRight = "+x);
setTimeout("MoveRightLayer('AdLayer2');", 20);
}
document.write("<span id=\"AdLayer2\" style=\"position:absolute;\"><img src=\"ad.jpg\" border=\"0\"></span>");
initEcAd();
document.all.AdLayer2.style.posTop = -200;
document.all.AdLayer2.style.visibility = 'visible'
MoveRightLayer('AdLayer2');
}
function MoveRightLayer(layerName) {
var x = 10;
var y = 267;// 右侧广告距离页首高度
var diff = (document.documentElement.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;
var y = document.documentElement.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = "+y);
eval("document.all." + layerName + ".style.posRight = "+x);
setTimeout("MoveRightLayer('AdLayer2');", 20);
}
document.write("<span id=\"AdLayer2\" style=\"position:absolute;\"><img src=\"ad.jpg\" border=\"0\"></span>");
initEcAd();
感谢copterfly提供原始代码。
Tags : javascript, w3c
Trackback url : http://www.blog-dragon.com/2008/11/w3c-javascript-float/trackback/
Trackback url : http://www.blog-dragon.com/2008/11/w3c-javascript-float/trackback/
评论或留言