0

何が間違っているのかわかり{axis:'x'}ませんが、このプラグインにオプションを付けると、スクロールが機能しません

私のhtmlコード:

<div id="wrap">

    <div id="main" class="container">

        <div id="wrapper">
            <div id="mask">

                <div id="item0" class="item">
                    <a name="item0"></a>
                    <div class="conteudo">
                        aaaa
                    </div>
                </div>

                <div id="item1" class="item">
                    <a name="item1"></a>
                    <div class="conteudo">
                        bbbbs
                    </div>
                </div>          

            </div>
        </div>

    </div>

</div>



<div class="wrap_menu">
            <ul class="menu">
                <li><a href="#item1" class="panel">EMPRESA</a></li>
                <div class="traco"></div>
                <li><a href="#item2" class="panel">SERVIÇOS</a></li>
                <div class="traco"></div>
                <li><a href="#item3" class="panel">EVENTOS</a></li>
                <div class="traco"></div>
                <li><a href="#item4" class="panel">VJ</a></li>
                <div class="traco"></div>
                <li><a href="#item5" class="panel">PARCEIROS</a></li>
                <div class="traco"></div>
                <li><a href="#item6" class="panel">CONTATO</a></li>
            </ul>
        </div>

私のCSSコード:

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

body{
    font-family:'Pontano Sans', sans-serif;
    color:#FFF;
    background:#110030 url(../imagens/fundo_site.jpg) no-repeat center center fixed;
}

#main {overflow:auto;
    padding-bottom: 117px;}  /* deve ter a mesma altura do rodapé */
#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#ccc;
    overflow:hidden;
}

#mask {
    width:100%;
    height:100%;
    /*background:#FFCC00;*/
}

.item {
    width:100%;
    height:100%;
    float:left;
}

#item0{
    background: #000 url(../imagens/bkg/fundo_site.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#item1{
    background: #000 url(../imagens/bkg/fundo_site2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.conteudo {
    position:relative;
    width:960px;
    height:420px;
    margin: 0 auto 150px;
    left:50%;
    margin-left:-480px;
    background:url(../imagens/fundo_conteudo.png);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.clear {
    clear:both;
}

.item:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.conteudo {
  display: inline-block;
  vertical-align: middle;
}

私のスクリプトコード:

$(document).ready(function() {

        $('a.panel').click(function (e) {
            e.preventDefault();
            //reset and highlight the clicked link
            $('a.panel').removeClass('ativo');
            $(this).addClass('ativo');

            //grab the current item, to be used in resize function
            current = $(this);

            //scroll it to the destination
            //$('.item').hide();
            //$((this).attr('href')).add('.current').show();
            //$('.item').show();
            $('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});


        });

    });

私もこのように使用しようとしています：

$('#wrapper').animate({scrollLeft:$(this).attr('href')},2000);

しかし、うまくいきません！

私は何を間違っていますか？

4

1 に答える 1

2

基本的な機能については、置き換えてみてください

$('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'});

と

$('#wrapper').scrollLeft($($(this).attr('href')).offset().left);

このコードは、スクロールを正しく設定する必要があります。パネルをアニメーション化してこの位置にスライドさせるには、次のコードを試してください。

$('#wrapper').animate({scrollLeft: $($(this).attr('href')).offset().left}, 2000);

編集：

あなたのサイトの場合、要素は上下に配置されています。現在、次のコードを使用して遷移を引き起こすことができます。

$('#wrapper').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000);

There are CSS and site-structure changes you can make to cause the transition to occur via a left-scroll, and to make only the content within the black centered box make the transition. Let me know if this kind of functionality is what is intended, and I'll provide for you some example markup.

于 2012-12-18T16:20:12.940 に答える