如何移动固定位置

时间:2010-06-19 08:58:44

标签: javascript javascript-events asp.net-3.5

http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6

在这个网址中,用户可以看到左侧看到的推特图片移动。如何做。这个技术名称是什么?请问这样做?

2 个答案:

答案 0 :(得分:0)

尝试搜索浮动菜单。 有两种类型:固定和绝对定位。如果您想要与示例中类似的动画,请使用绝对值。如果我记得它,IE6在固定位置有一些问题。

或者你可以使用jQuery,here是一个很好的例子。

答案 1 :(得分:0)

您需要挂钩scroll事件,以确保内容始终可见。

希望这可以帮助你:

<html>
<head>
    <title>fixed div</title>
    <script src="js/jquery1.4.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="div1" style="float:left;left:10px;top:10px;z-index:5000;height:50px;
           width:50px;clear:both;background-color:green;color:grey;
     font-size:300%;">O</div>
    a<br/>  b<br/>  b<br/>  d<br/>  e<br/>  f<br/>  g<br/>  h<br/>  i<br/>j<br/>
    k<br/>  l<br/>  m<br/>  n<br/>  o<br/>  p<br/>  q<br/>  r<br/>
    <script type = "text/javascript">
        $(function(){
            var left = 10;
            var top = 10;
            var d=$("#div1");
            $(window).scroll(function(){
                var t=$(window).scrollTop() + top +"px";
                d.animate({'margin-top':t},'slow');
            });
        });
    </script>
</body>
</html>