个人中心
gpt4 book ai didi

jquery - 具有动画滚动效果的居中水平网页布局

转载 作者：行者123 更新时间：2023-11-28 12:17:48 25 4
gpt4 key购买 nike

我们构建了一个居中的水平网页布局，带有动画滚动效果。我们有 5 个菜单，使用简单的 anchor 在不同页面之间导航。由于除正文(内容)区域外所有页面都是静态的，因此我们只需将 anchor 定位在特定的 DIV 中。因此，并不是所有页面都在滑动，而只是内容部分。研究的效果是从一页到另一页的流畅滚动。如果我们点击第一个菜单项，而不是最后一个(第 5 个)，所有页面都会一个接一个地滑动，直到最后一个……到现在为止一切都很好。

我们从其他站点(一些 css 部分)和小的 jquery 部分获取了示例代码。但是当我们点击某些菜单时，有时它不会做任何事情，有时不会显示好的幻灯片最后，不会向好的方向滑动(会向相反的方向滑动)我们就卡在了这部分.

HTML

<body>
    <div id="menu">
        <ul>
            <li><a href="#menu1">Page 1</a></li>
            <li><a href="#menu2">Page 2</a></li>
            <li><a href="#menu3">Page 3</a></li>
            <li><a href="#menu4">Page 4</a></li>
            <li><a href="#menu5">Page 5</a></li>
        </ul>
     </div>


    <div align="center" id="body">
      <div id="body_wrapper">
        <div class="body_content_content" id="menu1">menu1 page content</div>
        <div class="body_content_content" id="menu2">menu2 page content</div>
        <div class="body_content_content" id="menu3">menu3 page content</div>
        <div class="body_content_content" id="menu4">menu4 page content</div>
        <div class="body_content_content" id="menu5">menu5 page content</div>
      </div>
    </div>

</body>

CSS

#menu ul li {
 display:inline;   
}

#body {
  width:100%;
  height:200px;
  margin:auto;
  position:relative;
  border: 0px solid red;
  overflow:hidden;
  top:100px;
}

#body_wrapper {
  float:left;
  width:500%;
  padding:0;
  margin:0;
  height: 200px;
}

.body_content_content {
  float:left;
  width:20%;
  height:200px;
  #margin:10px 0;
  position:relative;
}

.body_content_content div:first {
  width:900px;
  padding:20px;
  margin:auto;
  float:none;   
}

JQUERY

$('a[href^="#"]').on('click',function(event){
      var $anchor = $(this);

      $('#body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1000);

      event.preventDefault();
  });

>> See the Web site

>> Here's a fiddle

在 fiddle 中，您可以设置 CSS overflow:display;在 #body ID 中并再次运行 fiddle 以查看一个正常的 div，其中有 5 个相邻的 div。

好的，谢谢你的帮助。

最佳答案

终于有一种方法可以与简单的 jquery 插件 Jquery.LocalScroll 一起使用，而且很容易实现

您可以在此处查看作者的完整详细信息 plugin site 和 demo我们可以同时滚动“X”、“Y”甚至两者。

CSS/HTML 并没有简单地改变看起来像这样的 JavaScript JQuery block :

$.localScroll.defaults.axis = 'xy';

// Scroll initially if there's a hash (#something) in the url 
$.localScroll.hash({
    target: '#content', // Could be a selector or a jQuery object too.
    queue:true,
    duration:1500
});

$.localScroll({
    target: '#body', // could be a selector or a jQuery object too.
    queue:true,
    duration:1000,
    hash:true,
    onBefore:function( e, anchor, $target ){
        // The 'this' is the settings object, can be modified
    },
    onAfter:function( anchor, settings ){
        // The 'this' contains the scrolled element (#content)
    }
});

此外，您必须添加 demo 中包含的 jquery.scrollTo-min.js 和 jquery.localscroll-min.js .

my solution 现在一切正常

关于jquery - 具有动画滚动效果的居中水平网页布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19456164/

25 4 0
文章推荐： javascript - 使用 Bootstrap 模式防止 OSX Chrome 上的页面跳转
文章推荐： javascript - 如何使用ajax获取github中的json文件
文章推荐： php - Wordpress bloginfo ('stylesheet_url')，这是从哪里来的？
文章推荐： ios - 如何避免 Reusable Cell 的复制行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com