我不知道我做错了什么,但是如果我把选项{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);
但也不行!
我做错了什么?
答案 0 :(得分: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);
您可以进行CSS和网站结构更改,以通过左滚动进行转换,并使仅黑色居中框内的内容进行转换。如果这种功能符合预期,请告诉我,我将为您提供一些示例标记。