我是一名帮助翻译的助手。下面是你需要翻译的内容:
是固定的,面板的背景色已经设置为渐变颜色(中间的面板有一个不同的颜色,用于调试目的)。
以下是CSS代码:
最后是管理面板动画的函数:
我所面临的问题如下:
1)我尝试使用jQuery函数实现当用户使用鼠标滚轮时运行幻灯片动画,但我的所有测试都无法正常工作...结构始终保持不变:
我想实现一个带有头部横幅的滑动水平布局。
HTML 结构如下:
<body>
<div id="header">
<div><a href="#one"> one </a></div>
<div><a href="#two"> two </a></div>
<div><a href="#thr"> thr </a></div>
</div>
<div id="one" class="panel"> </div>
<div id="two" class="panel"> </div>
<div id="thr" class="panel"> </div>
</body>
body {
width: 6000px;
overflow: hidden;
}
.panel {
width: 33.3%;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: -75px;
height: 960px;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#header {
position: fixed;
height: 75px;
margin-top: 25px;
}
#two{
background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
}
最后是管理面板动画的函数:
$(document).ready(function() {
$("#header a").bind("click", function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
我所面临的问题如下:
1)我尝试使用jQuery函数实现当用户使用鼠标滚轮时运行幻灯片动画,但我的所有测试都无法正常工作...结构始终保持不变:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var target // still not able to figure out who should i target
$("html, body").stop().animate({
//to the target >,<
}
});
2) 当我的浏览器窗口大小为100%时,一切都运行良好,但如果我缩小或增大缩放比例,一切都会混乱>,< 我注意到这是可以处理的,这里有一个例子: