JQuery: проблема с прокруткой анимации - PullRequest
Новая
       34

JQuery: проблема с прокруткой анимации

0 голосов
/ 14 августа 2010

Я написал эти 2 функции JQuery, которые должны принимать 9 блоков с идентификаторами, установленными от «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 для такого эффекта?Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 14 августа 2010

Должно быть проще с абсолютной позицией в классе .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.

0 голосов
/ 04 мая 2013 
<!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>
...