【问题标题】:jQuery panelSnap.js not working properly?jQuery panelSnap.js 不能正常工作?
【发布时间】:2016-07-01 17:30:33
【问题描述】:

提前感谢您的帮助。

我是 jQuerys 的新手,并且一直在 GitHub 的帮助下自学。我写了一个非常简单的滚动捕捉代码,但是,实际的捕捉部分不起作用。我将在下面粘贴我的代码:

<!DOCTYPE html>
<html>
<center>
<head>
  <link href="my.css" rel="stylesheet" type="css/text">
<meta name="robots" CONTENT="all">

<title></title>
<script type="text/JavaScript" src="/htdocs/jQuery/jquery-1.12.1.min.js">    </script>
 <script type="text/JavaScript" src="/htdocs/jQuery/jquery.panelSnap.js">     </script>
 <script>
      jQuery(function($) {
        $('body').panelSnap();
      });
    </script>
</head>
<body>

<div>
    <div class="page one">
      <div class="inside">
        <div>TrynaMatch?</div>
      </div>
    </div>
    <div class="page two">
      <div class="inside">
      </div>
    </div>
    <div class="page three">
      <div class="inside">
      </div>
    </div>
    <div class="page four">
      <div class="inside">
      </div>
    </div>
</div>

</center>

</body>
</div>
</html> `

请帮助我提供任何提示。我是一个完整的初学者,所以随时提出任何批评。再次感谢!

【问题讨论】:

标签: jquery scroll-snap-points


【解决方案1】:

jQuery(function($) {
  $('body').panelSnap({
    panelSelector: 'div.page',
  });
});
.page {
  height: 300px;
  background: green;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://guidobouman.github.io/jquery-panelsnap/jquery.panelSnap.js"></script>
<center>
  <div>
    <div class="page one">
      <div class="inside">
        <div>TrynaMatch?</div>
      </div>
    </div>
    <div class="page two">
      <div class="inside">
      </div>
    </div>
    <div class="page three">
      <div class="inside">
      </div>
    </div>
    <div class="page four">
      <div class="inside">
      </div>
    </div>
  </div>
</center>

对于您的情况,基本设置不起作用,因为它默认设计为与 html5 部分一起使用。您必须提供上面示例中的 panelSelector 选项。从 HTML5 开始,我建议不要使用 center 标签,因为 HTML5 不支持它。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-04-16
    • 2011-12-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-07
    相关资源
    最近更新 更多