0

我已经编写了这 2 个 JQuery 函数，它们应该占用 9 个 ID 设置为“C1”到“C9”的块并向上滚动它们直到它们到达顶部，然后到达顶部的每个块都应该返回并重新开始。奇怪的是，每次他们重新开始时，积木之间的空间都会变大，直到一切都变得混乱。我是 JQuery 的新手，如果我应该如何做到这一点，我将不胜感激任何帮助甚至更好的想法。这是代码：

<html> 
    <head> 
        <title>Some JQuery Practice</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <link rel="stylesheet" href="style1.css" type="text/css">
        <style>
            #BOX{
                position:absolute;
                width:700px;
                height:200px;
                top:100px;
                overflow:hidden;
                background-color:#D3C79D;
                -moz-border-radius:30px;
            }
            .content{

                font-family:Tahoma;
                font-size: 11px;
                position:relative;
                width:660px;
                top:200px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script>
            function OneGoesUp(target){
                if(target.position().top == 0){
                    target.css({"top":"270"});
                }
                target.animate({
                    "top": "-=1"
                }, 10, function(){OneGoesUp(target)});
            }
            function GoUp(){
                for(var i=1;i<10;i++){
                    var str = "#c";
                    str += i;
                    $(str).text(str);
                    OneGoesUp($(str));
                }
            }
        </script>
    </head>
    <body onload="GoUp();"> 
        <div id="BOX">
        <div id="c1" class="content"><p>Lorem ipsum</p></div>
        <div id="c2" class="content"><p>Lorem ipsum</p></div>
        <div id="c3" class="content"><p>Lorem ipsum</p></div>
        <div id="c4" class="content"><p>Lorem ipsum</p></div>
        <div id="c5" class="content"><p>Lorem ipsum</p></div>
        <div id="c6" class="content"><p>Lorem ipsum</p></div>
        <div id="c7" class="content"><p>Lorem ipsum</p></div>
        <div id="c8" class="content"><p>Lorem ipsum</p></div>
        <div id="c9" class="content"><p>ghghjghjghj</p></div>
        </div>

    </body>
</html>

GoUp() 函数被调用一次，这就是页面加载的时候。我必须使用 Cycle 插件才能获得这样的效果吗？提前致谢。

4

2 回答 2

1

.content 类上的绝对位置应该更容易（这样屏幕上的位置更加一致，并且在 div.content 元素中不相互依赖，所以我建议你相应地更新你的 CSS），然后JS中的以下修改：

<script type="text/javascript">
$(document).ready(
    function(){
        $('.content').each(function(i){
            $(this).text($(this).attr('id'));
            $(this).css('top', 15*i + 'px'); //initial position, Y-space of 15px beteween each div
            OneGoesUp($(this));
        });
    }
);

function OneGoesUp(target){
    if(parseInt(target.css('top')) == 0){
        target.css({'top':'270px'});
    }
    target.animate({
        "top": "-=1"
    }, 10, function(){OneGoesUp(target)});
}
</script>

最后onload从body标签中删除。

于 2010-08-13T21:53:08.110 回答
0 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smooth Scrolling</title>
    <style type="text/css">
        .container{
            width:300px;
            margin:0 auto;  
                  }
        .section{
            margin-top:60px;
                }
    .navigation{
        position: fixed;
        background:white;
        padding:20px 20px;
        width:100%;
        margin-top:0px;
        top:0px;
    }
</style>
</head>
<body>
<div class="container">
<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
    <a href="#php">PHP</a>
    <a href="#css">CSS</a>
</div>
<div class="section">
    <h1 id="html">HTML</h1>
            <p>
            put your text about html here


            </p>
</div>
<div class="section">
    <h1 id="javascript">JavaScript</h1>
    <p>
            put your javascript details here.
            </p>
</div>
<div class="section">
    <h1 id="jquery">jQuery</h1>
    <p>
            Put your details about javascript here
            </p>

</div>
<div class="section">
    <h1 id="php">PHP</h1>
    <p>
            put your details about php here
            </p>

</div>
<div class="section">
    <h1 id="css">CSS</h1>
    <p>put your details </p>

</div>      
</div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script>
$(document).ready(function() {
    $('a[href^="#"]').click(function(event) {
        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;

        $('html, body').animate({scrollTop:target}, 3000);
        event.preventDefault();
    });
});
</script>
</body>
</html>
于 2013-05-04T15:47:27.313 回答