首页 新闻 赞助 找找看

图形随窗口移动

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我也是刚明白一些。入门好难。对这些相关的谁有比较好的网址发下也行,谢谢了,不过最好帮我调试下上边的程序,指出错误。再次谢谢!

石头儿的主页 石头儿 | 初学一级 | 园豆:82
提问于:2009-08-26 18:49
< >
分享
最佳答案
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
屁孩儿 | 菜鸟二级 |园豆:240 | 2009-08-28 18:49
其实我就是石头儿,我自己又搜了一些,写了一下,就改了一点,如上代码,没变多少,现在在IE8能用了,希望搜索到这个问题的人能够顺利使用吧。
屁孩儿 | 园豆:240 (菜鸟二级) | 2009-08-28 18:53
其他回答(1)
0

我在IE上看的效果是图形跟随窗口始终保持在右下角的,重点是setTimeout这句,虽然不是什么好的实现方法,但确实应当是可行的,当然在FIREFOX下是一塌糊涂

收获园豆:5
Gray Zhang | 园豆:17610 (专家六级) | 2009-08-27 00:57
不是吧,我在IE8上怎么图形不始终保持在 窗口 的右下角,而是在 页面的右下角啊,别蒙我啊。如果页面很长,图形就会看不见了……确认一下啊
支持(0) 反对(0) 石头儿 | 园豆:82 (初学一级) | 2009-08-27 10:21
原来你用的是IE8,这个JS是给IE6专用的…… http://jscode.seekroad.com/js.asp?id=1032 看这个
支持(0) 反对(0) Gray Zhang | 园豆:17610 (专家六级) | 2009-08-27 12:41
http://jscode.seekroad.com/js.asp?id=1032 这个链接无法显示……
支持(0) 反对(0) 石头儿 | 园豆:82 (初学一级) | 2009-08-27 17:33
@Gray Zhang:谢谢关注我的问题!
支持(0) 反对(0) 石头儿 | 园豆:82 (初学一级) | 2009-08-28 18:58
@Gray Zhang:谢谢关注我的问题!
支持(0) 反对(0) 石头儿 | 园豆:82 (初学一级) | 2009-08-28 18:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册