Question

我已经编写了这两个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插件才能获得这样的效果？提前谢谢。

Answer 1

.content class 上的绝对位置应该更容易（这样在屏幕上的位置更加一致，并且在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。

Answer 2

<!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>

JQuery：滚动动画问题

2 个答案: