jquery – 滑动水平响应布局和MouseWheel输入

我正在尝试使用标题横幅实现滑动水平布局.

这是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％大小时,一切似乎都运行良好,但如果我减少或增加缩放,一切都搞乱了>,<
我注意到可以处理这个,here is an example:

解决方法

要获得目标,您只需使用面板类填充元素,然后使用索引在面板中移动.

最后,如果您在窗口调整大小时遇到问题,可以绑定此event并执行任何操作

看看MouseWheelEvent.

并使用您的代码尝试此示例：

$(document).ready(function() {
  $("#header a").bind("click",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,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,#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>

原文链接：https://www.f2er.com/jquery/178496.html

jquery – 滑动水平响应布局和MouseWheel输入

解决方法

猜你在找的jQuery相关文章