Question

我刚刚按照本教程使用jQuery创建简单的视差效果：http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

我唯一的问题是，当我编写他的jQuery稍微修改过的版本时：

  $(document).ready(function(){
    $('section').each(function(){
      console.log($(this));
      var $bgobj = $(this); // assigning the objecti
      $(window).scroll(function(){
       var yPos = -($(window).scrollTop / $bgobj.data('speed'));
       var coords = '50% '+ yPos + 'px';
       $bgobj.css({ backgroundPosition: coords });
      });
    });
  });

我的所有带有背景图片的元素（包括<section>标记之外的元素）都应用了效果，而不是每个<section>都更改了backgroundPosition。

当我console.log()查看哪些元素被选中时，我得到以下内容：

jQuery.fn.init[1]

正好两次，即我在DOM中有多少<section>个标签。然而，奇怪的是，存在第三个元素，其具有应用于其background图像的视差效果。

这是我的HTML：

#welcome.container
  .row
    %section#home.pages{"data-speed" => "10", "data-type" => "background"}
      .col-md-4
      .col-md-8
        %article
          %h2#fls-title
            Study English at FLS International
            %br
              English Language Schools
          %p#fls-text
            It’s easy to learn English as a Second Language (ESL) with FLS International intensive English courses. The ESL schools of FLS International use a modern curriculum that exemplifies how to learn English language skills most effectively—by combining English speaking, listening and reading in a supportive learning environment.
            %form{:action => "#{url_for(:controller =>'school_applications', :action =>'new')}"}
              %input{:type => "submit", :value => "Apply Now"}/

  %p
  %p
  %br/
  .row
    .col-md-4
      #red.quote
        I will never forget the time I spent here.
        .signature Jeremy, Switzerland
    .col-md-4
      #blue.quote
        Since I entered FLS, I have never regretted my decision because the classes offered by FLS are all fantastic.
        .signature Chia-Yuan, Taiwan
    .col-md-4
      #gold.quote
        The quality of teachers is good.
        .signature Masaru, Japan
  .row
    %section#some
      .col-md-2
      .col-md-10
        %article
          %h2#nine-levels
            Nine Levels of ESL Courses Mean Everyone
            %br
              Can Learn the English Language
          %p#nine-levels-text
            FLS International offers core programs that put learning the English language within the reach of all students. We cover nine levels of English, from English for beginners to an advanced English course that prepares students for entrance into American colleges and universities. All students who study English at FLS participate in the core program and can take additional elective classes that target specific areas for improvement. In addition, all FLS students benefit from such specialized learning aids as English Everywhere and Language Extension Days.
  %p
  %p
  %br/ 
.h2
  #gram_headings
    \#myflsadventure
#myflsadventure
.h2
  #gram_headings
    \#flssummer2014
#flssummer2014
#welcome.container
  .row
  .row
    .col-md-4
    %div{class: "col-md-4\""}
      %video{controls: "", height: "240", width: "320"}
        %source{src: "#{asset_path('title00.mp4')}", type: "video/mp4"}

包含所有.row标签的#color-name.quote在不应用时会应用视差效果。

这是带有背景图像的Css位：

#blue{
 background: url(image_path("web_circ_blue.png")) 50% 0 no-repeat fixed; min-height: 1000px; 
}
#gold{
 background: url(image_path("web_circ_gold.png")) 50% 0 no-repeat fixed; min-height: 1000px;
}
#red{
 background: url(image_path("web_circ_red.png")) 50% 0 no-repeat fixed; min-height: 1000px; 
}
 #home {
  margin-right:200px;
  background: url(image_path("1IMG_1338.JPG")) 50% 0 no-repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
#some {
  margin-right:200px;
  background: url(image_path("1IMG_1341.JPG")) 50% 0 no-repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

以下是该现象的样本。请注意，在引号行中，蓝色圆圈在两个故意视差的<section>

之间的背景中是视差的

https://fls-net.herokuapp.com/

据推测应用于<section>的视差效果应用于每个背景图像</section>

0 个答案: