Question

应用这个js插件有点问题。

我输入了所有必要的文件，但是js不能工作

http://soulwire.github.io/FoldScroll/

我可以得到一些帮助吗？

jQuery(document).ready(function() {

$( '.quotes' ).foldscroll({

// Perspective to apply to rotating elements
perspective: 10,

// Default shading to apply (null => no shading)
shading: 'rgba(0,0,0,0.2)',

// Area of rotation (fraction or pixel value)
margin: 0.2
});});

这是HTML

<section class="quotes">
numerous his

</section>

Answer 1

我想我找到了3件事，你需要添加到你的代码中：

确保您使用

<div>

您需要为<section>和子元素
我还摆弄了foldscroll - init对象

您可以从以下代码开始：

    jQuery(document).ready(function() {

      $('.quotes').foldscroll({

        // Perspective to apply to rotating elements
        perspective: 600,

        // Default shading to apply (null => no shading)
        shading: 'rgba(0,0,0,0.2)',

        // Area of rotation (fraction or pixel value)
        margin: 0.3
      });
    });

        .quotes {
          position: absolute;
          bottom: 20px;
          width: 100%;
          left: 0;
          top: 20px;
        }
        .quotes div {
          border-bottom: 1px dashed #ddd;
          text-align: justify;
          line-height: 1.8;
          background: #fff;
          max-width: 620px;
          font-size: 14px;
          padding: 80px 40px;
          margin: 0 auto;
          width: 600px;
          color: #333;
        }

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="http://soulwire.github.io/FoldScroll/js/foldscroll.js"></script>
</head>

<body>

  <section class="quotes">
    <div>My first article</div>
    <div>My second article</div>
    <div>My third article</div>
    <div>My fourth article</div>
    <div>My fifth article</div>
    <div>My sixth article</div>
  </section>

  <script type="text/javascript" src="foldscroll.min.js"></script>

</body>

</html>

foldscroll.js上的一些帮助

1 个答案: