我正在尝试实现带有标题横幅的滑动水平布局。
这是 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>
标题是固定的,面板提供了渐变背景(中间面板具有不同的颜色用于调试目的)。这是 CSS:
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%大小时,一切似乎都运行良好,但是如果我减少或增加缩放,一切都会搞砸>,<我注意到可以处理这个问题,这里有一个例子:>
要获取目标,您只需用panel
类填充元素的数组,然后使用索引在面板中移动。
最后,如果您在调整窗口大小时遇到滚动问题,您可以绑定此事件并执行任何您想要的操作
看看MouseWheelEvent。
并用你的代码试试这个例子:
$(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);
});
var scroll_targets = $(".panel");
var scroll_targets_index = 0;
$(window).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
if(scroll_targets_index < scroll_targets.length-1){
var where = ++scroll_targets_index;
$("html, body").stop().animate({
scrollLeft: $(scroll_targets[where]).offset().left,
scrollTop: $(scroll_targets[where]).offset().top
}, 1200);
}
}
else {
var where;
if(scroll_targets_index > 0){
where = --scroll_targets_index;
}
else{
where = 0;
}
$("html, body").stop().animate({
scrollLeft: $(scroll_targets[where]).offset().left,
scrollTop: $(scroll_targets[where]).offset().top
}, 1200);
}
});
$(window).resize(function () {
$('html,body').scrollTop($(scroll_targets[where]).offset().top);
$('html,body').scrollLeft($(scroll_targets[where]).offset().left);
});
});
#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);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="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>
</div>
在Unravel中,我认为这是使用CSS和JavaScript使用transform3d和其他一些css技巧完成的。如果你想获取滚动事件,当你在正文上有溢出:隐藏时,它不会发生,因为你刚刚告诉浏览器隐藏它的所有滚动!因此,为了解决您现在遇到的问题,我试图做的是使用鼠标滚轮事件,其行为如下:
$(window).on('wheel', function (event) {
console.log(event); // Here you can see all of its events properties and functions in the console
});
有一个 wheelDelta 属性,如果您向前执行鼠标滚轮,则返回 120,或者在向后执行鼠标滚轮时返回 -120,因此我附加了一个计数器,以便我可以知道鼠标滚轮事件触发了多少次:
$(window).on('wheel', function (event) {
if (event.originalEvent.wheelDelta / 120 > 0 ) {
count++;
console.log(count) ;
if(count > 30 ){
$("html, body").stop().animate({
scrollLeft: $('#two').offset().left,
scrollTop: $('#two').offset().top
}, 1200);
}
if(count > 60 ){
$("html, body").stop().animate({
scrollLeft: $('#thr').offset().left,
scrollTop: $('#thr').offset().top
}, 1200);
}
if(count > 90 ){
$("html, body").stop().animate({
scrollLeft: $('#two').offset().left,
scrollTop: $('#two').offset().top
}, 1200);
count = 0;
}
}
});
这只是为了您继续创建逻辑,以便在鼠标滚轮更改为另一个面板时构建,依此类推,祝您好运!