Question

you can achieve this with jquery plugins...for that you have to download this js files from github...https://github.com/Funsella/jquery-scrollie.....



    <script src="jquery.scrollie.min.js"></script>
    <script src="jquery.scrollie.js"></script>
    <script>

    $( window ).ready(function() {

        var wHeight = $(window).height();

        $('.slide')
          .height(wHeight)
          .scrollie({
            scrollOffset : -50,
            scrollingInView : function(elem) {

              var bgColor = elem.data('background');

              $('body').css('background-color', bgColor);

            }
          });

      });
    </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.scrollie.min.js"></script>
<script src="jquery.scrollie.js"></script>
<div class="main-wrapper">

  <div class="slide slide-one" data-background="#3498db">
    <div class="inside">
    <p>I Wanted to create a really simple pen</p>
    </div>
  </div>
  <div class="slide slide-two" data-background="#27ae60">
    <div class="inside">
      <p>A pen that uses some awesome colors <br /><span>awesome <a href="http://flatuicolors.com/" target="_blank">like these</a></span></p>
    </div>
  </div>
  <div class="slide slide-three" data-background="#e74c3c">
    <div class="inside">
      <p>And that made you scroll</p>
    </div>
  </div>
  <div class="slide slide-four" data-background="#e67e22">
    <div class="inside">
      <p>Mission Accomplished</p>
    </div>
  </div>
  <div class="slide slide-five" data-background="#9b59b6">
    <div class="inside">
      <p>Have an awesome day</p>
    </div>
  </div>

  <div class="slide slide-five" data-background="#34495e">
    <div class="inside">
      <p>This was built a long time ago so I made a better version <a href="http://codepen.io/Funsella/pen/3271d716c5c6b67c18af6f4ecf9295af/">better version</a> </p>
    </div>
  </div>

</div>
<style>
* { box-sizing: border-box }

body {
  font-family: 'Coming Soon', cursive;
  transition: background 1s ease;
   background: #3498db;
}

p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;

}

span {
  clear: both;
  font-size: .7em;
  color: #bdc3c7;
}

a {
  color: #c0392b;
  text-decoration: none;
}

.slide {

  .inside {
    display: table;
    height: 100%;
    width: 100%;
    padding: 0 3em;

    p {
      display: table-cell;
      width: 100%;
      clear: both;
      vertical-align: middle; 
      text-align: center; 
    }
  }
}
</style>



try this....

此代码来自第3章中的练习＃34; Eloquent JavaScript＆＃34;。此处不包括祖先内的数据。我有两个问题。

我的第一个问题是关于变量function average(array) { function plus(a, b) { return a + b; } return array.reduce(plus) / array.length; } var byName = {}; ancestry.forEach(function(person) { byName[person.name] = person; }); var differences = ancestry.filter(function(person) { return byName[person.mother] != null; }).map(function(person) { return person.born - byName[person.mother].born; }); console.log(average(differences)); // 31.2以及如何在byName方法中使用它。我对正在发生的事情的看法是forEach方法迭代通过祖先对象来找到一个元素，然后以某种方式在forEach对象中输入所述元素。

我有另一个关于变量byName的问题。我对正在发生的事情的看法是differences方法迭代祖先对象只选择有母亲的元素然后这将以某种方式映射到另一个数组。

Answer 1

根据我的理解，forEach方法循环遍历数组，并将数组中的所有值通过键（name）和值（person对象）对放入byName集合，您可以通过他/来引用person对象她的名字。 map方法将创建一个新数组，用于存储每个人的年龄与他/她母亲之间的差异，该数据来自已过滤的数组（没有母亲的人已被删除）。变量差异将存储这些值抱歉我的英文。

雄辩的JavaScript第5章练习

1 个答案: