图形随窗口移动
0
悬赏园豆：20
[已解决问题]
解决于 2009-08-28 18:58
就是让一个图片 即使web窗口滚动 也总是位于窗口右下角，点击它页面就会到顶端（由于整个页面太长，这样方便，相信大家肯定见过，做过的）。
http://www.hongen.com/pc/homepage/javascript/sample/followwinpic.htm
这个网址可以看到效果，虽然功能不是到顶端，但现在我仅要求 图形随窗口移动 即可，锚点以后再设。下边是我的js程序，大侠们，前辈们帮我看看吧，愁死我了，查了一天，调了一天，死的心都有了……：
<script type = "test/javascript" >
function checkLocation() {
imgwidth=50;
imgheight=50;
var availableX=document.body.clientWidth;
var availableY=document.body.clientHeight;
var currentX=document.body.scrollLeft;
var currentY=document.body.scrollTop;
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
var divBranding = document.getElementById("branding");
divBranding.style.pixelLeft = x;
divBranding.style.pixelTop = y;
setTimeout("checkLocation()",10);
}
window.onload = function(){
checkLocation();
}
</script>
在aspx文件body中有：
<body>
<div id="branding" style="position:absolute">
</div>
</body>
现在这个程序在IE上的效果是 图形不随窗口移动 ，要是各位不想看，有现成的js代码，给我一份也行，反正我现在是在学习。连clientWidth和scrollTop我也是刚明白一些。入门好难。对这些相关的谁有比较好的网址发下也行，谢谢了，不过最好帮我调试下上边的程序，指出错误。再次谢谢！
最佳答案
0
aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Scroll.aspx.cs" Inherits="Scroll" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="jsFolder/scroll.js" type="text/javascript" language="javascript"></script>
</head>
<body style="margin:0px; padding:0px; border:0px;">
<form id="_form" runat="server" style="margin:0px; height: 597px;">
<div id="floatImage1" style="position: absolute; float: left; width: 400; border: solid 1px black;">
<img src="img/2.jpg" width="400" height="1000" alt="" />
</div>
<div id="Div1" style="position: absolute; float: left; width: 400; border: solid 1px black;">
<img src="img/2.jpg" width="400" height="1000" alt="" />
</div>
<div id="Div2" style="position: absolute; float: left; width: 400; border: solid 1px black;">
<img src="img/2.jpg" width="400" height="1000" alt="" />
</div>
<div id="Div3" style="position: absolute; float: left; width: 400; border: solid 1px black;">
<img src="img/2.jpg" width="400" height="1000" alt="" />
</div>
<div id="floatImage" style="position: absolute;">
<a href="#_form">
<img src="img/top.gif" alt="top" style="border: 0px; padding: 0px; margin: 0px;" /></a>
</div>
</form>
</body>
</html>
js代码：
var imgW = 55,imgH = 21;
function SetLoc(){
if(!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
broX = window.pageXOffset;
broY = window.pageYOffset;
}
else{
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
broX = document.documentElement.scrollLeft;
broY = document.documentElement.scrollTop;
}
var divFloatImage = document.getElementById("floatImage");
divFloatImage.style.pixelLeft = eval(winW -(imgW + 20) + broX);
divFloatImage.style.pixelTop = eval(winH - (imgH + 20) + broY);
setTimeout(SetLoc,1);
}
window.onload = function(){
SetLoc();
}
收获园豆：15
其实我就是石头儿，我自己又搜了一些，写了一下，就改了一点，如上代码，没变多少，现在在IE8能用了，希望搜索到这个问题的人能够顺利使用吧。
其他回答(1)
0
我在IE上看的效果是图形跟随窗口始终保持在右下角的，重点是setTimeout这句，虽然不是什么好的实现方法，但确实应当是可行的，当然在FIREFOX下是一塌糊涂
收获园豆：5
不是吧，我在IE8上怎么图形不始终保持在 窗口 的右下角，而是在 页面的右下角啊，别蒙我啊。如果页面很长，图形就会看不见了……确认一下啊
原来你用的是IE8，这个JS是给IE6专用的……
http://jscode.seekroad.com/js.asp?id=1032
看这个
http://jscode.seekroad.com/js.asp?id=1032 这个链接无法显示……
@Gray Zhang:谢谢关注我的问题！
@Gray Zhang:谢谢关注我的问题！
