代码之家 › 专栏 › 技术社区 › Auxiliary

JQuery:滚动动画问题

slide effects scroll jquery

0

Auxiliary · 技术社区 · 14 年前

<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()函数只被调用一次,此时页面将被加载。我必须使用这样的效果周期插件? 提前谢谢。

2 回复 | 直到 14 年前

1

darma 14 年前

这应该更容易 在.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

2

0

ayan sil 11 年前

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