关于js实现两边弹出滑动网页
最近尝试着去实现一个在停留在网页侧边的广告页，这个广告页随着滚动条的移动而不断调整自身的位置，从而一直保持在屏幕范围内。
主要原理是设置一个定时器，根据document.body.scrollTop的变化去调整广告页对象的posTop属性。
中间遇到一个问题比较奇怪，发现DOCTYPE为XHTML时document.body.scrollTop总是为0，只有当DOCTYPE为HTML时document.body.scrollTop
的值才会随着滚动条的滑动而变化。
网页源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的减肥经历 </title>
<meta name="keywords" content="" />
<meta name="description" content="我的减肥经历" />
<script language=javascript>
dt3_img="/swissgear/article/left.jpg" //左边图片
dt4_img="/swissgear/article/right.jpg" //右边
function duilianload()
{
sidebar3.style.top=250; //离顶部距离
sidebar3.style.left=5; //离左边距离
sidebar4.style.top=250;
sidebar4.style.right=5; //右边距离
}
function MoveLayer(layerName)
{
var y = 250;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop + y - eval("document.all." + layerName + ".style.posTop"))*0.93;
//alert(document.all.sidebar3.style.posTop);
var y = document.body.scrollTop + y - diff;
// var y = document.body.scrollTop + 50;
eval("document.all." + layerName + ".style.posTop = y");
setTimeout("MoveLayer('"+layerName+"');", 10);//设置20毫秒后再调用函数MoveLayer()
}
if(document.all && window.screen.width>800)
{
//图片对联
document.write("<div id=sidebar3 style='position: absolute;visibility:visible;z-index:2;border:1px solid #ccc;'><a href='http://www.alimama.com/' target='_blank'><img src='http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg' border=0></a></div>"+"<div id=sidebar4 style='position: absolute;visibility:visible;z-index:1; border:2px solid #ccc;'><a href='/ggao/hezuo.html' target='_blank'><img src='http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg' border=0></a></div>");
duilianload();
MoveLayer('sidebar3');
MoveLayer('sidebar4');
}
function duilian_DoFSCommand(command,args)
{
if (command == "Close")
{
if (args=="left"){
document.all.sidebar3.style.visibility = "hidden";
}
else if (args=="right"){
document.all.sidebar4.style.visibility = "hidden";
}
else{
document.all.sidebar3.style.visibility = "hidden";
document.all.sidebar4.style.visibility = "hidden";
}
}
if (command == "GoUrl"){
window.open(dl_click);
}
}
if (document.all){
document.write("<Script language=/"JavaScript/" For=/"duilianid/" Event=/"FSCommand(command,args)/">/n");
document.write(" duilian_DoFSCommand(command,args);/n");
document.write("</Scri"+"pt>/n");
}
</script>
<link href="/swissgear/article/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="showpage news">
<!--<body>-->
<!-- 页头 -->
<!-- 导航tab选项卡 -->
<!--滚动图片-->
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<div id = "ad">
<marquee scrollamount="2" scrolldelay="5">
<a href="http://baidu.com" target="_blank"> <img alt="链接到w3cn.org首页" src="../file/amaze.gif" /></a>
</marquee>
</div>
</td>
</tr>
<tr valign="top">
<td class="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="position">
<tr>
<td>您当前的位置：<a href="/">首页</a> > <a href="/jianfeiyaopaixingbang/">评价最好的减肥产品</a></td>
</tr>
</table> <!-- table 当前位置-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="box">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="title_info">
<tr>
<td><h1>我的减肥经历</h1></td>
</tr>
<tr>
<td class="info_text">时间：2011-04-27 14:53:33 来源： 作者：</td>
</tr>
</table> <!-- end table 文章标题-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="text"><p>从小爱吃的我，体重曾经一度到达140斤，那个时分就总想着：我要变瘦，我肯定要变瘦！看着<a href="http://www.jf500.cn/jianfeiyaopaixingbang/"><a href="http://www.jf500.cn/" target="_blank" class="infotextkey">减肥产品排行榜</a></a>，选着<a href="http://www.jf500.cn/" target="_blank" class="infotextkey">淘宝最好的减肥药</a> ，还不知道<a href="http://www.jf500.cn/jianfeiyaopaixingbang/"><a href="http://www.jf500.cn/" target="_blank" class="infotextkey">什么减肥药效果好</a></a>，抱着“一夜之间变瘦”的想法，几年时光屡次减重却从未胜利，每次保持都不会超越一个礼拜。在开端衰弱减肥！学校体检让我又一次有了要减肥的想法，然而极其节食招致的一次次失败让我抉择这次在要用衰弱的方式减上来，保持“养分平衡＋恰当静止”，这就是减肥的真理！</p>
<p>刚开端的3个月里我没有做很大强度的静止，长时光不锤炼之后忽然猛烈静止对身材不好，所以我做的对比多的是部分静止，比方呼啦圈，仰卧起坐，床上蹬自行车等。一开端能够难保持，然而一想到本人的宗旨就有能源了！</p>
<p>我喜爱的瘦身工具，能让我清晰的晓得本人的身材状态，对减肥更有掌握。还有论坛上JMS发的一些减肥常识和经历，让我学到了很多，赞助很大。在这三个月里我大约瘦了10多斤，同窗、冤家、街坊都开端说我瘦了，而且很显著，我很开心，想到这次保持了那么久，终于有了这样的后果，我再也不会也不愿废弃了！ 我进入全新的一个月~7月份因为打工等各种起因，我的减肥规划彷徨不前，有时体重还回升了1KG，我意识到了不对，而且也晓得减肥到前面会越来越艰难，为了得到更专业的减肥常识和指示我购置了3期NICE减重规划，预备8月重振旗鼓与肉肉再次停战！ 饮食方面我晓得了本人须要吃些什么类型的食物、应当吃多少，还有加餐该怎样吃。</p>
<p>关于始终困扰我的食物分量的问题，规划里也有对比形象的测量方式，比方半个拳头米饭约为50g。 依据规划指示，我个别早上会吃1片吐司、1个白煮蛋还有1杯牛奶，中午和晚上基础都是2个素菜1个荤菜，素菜抉择对比多，荤菜大多是鸡蛋和鱼虾，弥补优质蛋白，有时妈妈会做一些鸡鸭羊牛的肉，我也会吃一点。我还会把水果、酸奶、坚果作为加餐。 静止方面依据我的体重和围度规划倡议我做的有氧静止是健身操，我以前总认为很多静止都没有条件做，却没想到能够跳健身操，我已经跟着视频跳了1个月，基础维持一个星期4到5次的静止，接下来预备换一套操继承跳。另外针对我最想瘦的两个部位，我会做规划里倡议的部分静止。</p>
<p>对如何支配本人的静止时光依据指示履行起来也挺不便的。 渐渐的，静止关于我已经成为了一种习性，不能做太大强度的静止时也会保持天天至少半小时的部分静止，或许做做家务，比方用抹布擦地板，比用拖把更有后果~ 就这样，8月份我的体重从60KG减到了57KG，如今我更关切的是本人的围度，愿望能早点处理肚子这个老大难问题！</p>
<!--<p>test1对如何支配本人的静止时光依据指示履行起来也挺不便的。 渐渐的，静止关于我已经成为了一种习性，不能做太大强度的静止时也会保持天天至少半小时的部分静止，或许做做家务，比方用抹布擦地板，比用拖把更有后果~ 就这样，8月份我的体重从60KG减到了57KG，如今我更关切的是本人的围度，愿望能早点处理肚子这个老大难问题！</p>
<p>test2对如何支配本人的静止时光依据指示履行起来也挺不便的。 渐渐的，静止关于我已经成为了一种习性，不能做太大强度的静止时也会保持天天至少半小时的部分静止，或许做做家务，比方用抹布擦地板，比用拖把更有后果~ 就这样，8月份我的体重从60KG减到了57KG，如今我更关切的是本人的围度，愿望能早点处理肚子这个老大难问题！</p>
<p>test3对如何支配本人的静止时光依据指示履行起来也挺不便的。 渐渐的，静止关于我已经成为了一种习性，不能做太大强度的静止时也会保持天天至少半小时的部分静止，或许做做家务，比方用抹布擦地板，比用拖把更有后果~ 就这样，8月份我的体重从60KG减到了57KG，如今我更关切的是本人的围度，愿望能早点处理肚子这个老大难问题！</p>
-->
<div id="cttPageDiv" class="pages"><form name="pageForm" id="pageForm" action="" method="post"><input type="hidden"
name="rs_strTitle_aa" value="<span class=title_red_b>天涯蜗牛计划：贵州黔西县红板小学——午餐计划</span>">
<input type="hidden" name="intLogo" value="0"><input type="hidden" name="rs_permission" value="1">
<input type="hidden" name="apn" value="97834,97994,98161,98273,98395,98913,99494,100256,103231,104675">
<input type="hidden" name="pID" id="pID" value=''></a><a href="http://www.tianya.cn/techforum/content/838/10/15858.shtml" >首篇</a>
<a href="http://www.tianya.cn/techforum/content/838/9/15858.shtml" >上一篇</a>
<a href="http://www.tianya.cn/techforum/content/838/2/15858.shtml" >下一篇</a><a href="http://www.tianya.cn/techforum/content/838/10/15858.shtml" >末篇</a>
</form></div>
</td>
</tr>
</table> <!-- end table 内容-->
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- end tab table-->
<div id="footer">
<p id="BlogPowerBy">欢迎访问<a href="/">swissgear</a>。本站主要介绍swissgear旗舰店网址及swissgear旗舰店最新打折促销资讯.</p>
<p id="BlogCopyRight">友情链接:<a href="/">swissgear旗舰店</a> <a href="/">swissgear</a>
<script src="http://s6.cnzz.com/stat.php?id=2544375&web_id=2544375&show=pic" language="JavaScript"></script>
<a href="http://taobao2945.blog.163.com">收藏的优质淘宝商城</a>
</p>
</div>
</body>
</html>