javascript - 将代码应用于文本行而不是容器 div

Question

我有以下代码以不同的速度滚动内容

$.fn.moveIt = function() {
  var $window = $(window);
  var instances = [];

  $(this).each(function() {
    instances.push(new moveItItem($(this)));
  });

  window.onscroll = function() {
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst) {
      inst.update(scrollTop);
    });
  }
}

var moveItItem = function(el) {
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop) {
  this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function() {
  $('[data-scroll-speed]').moveIt();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-scroll-speed="3">text 1</h1>
<p data-scroll-speed="5">text 2 .... content covers multiple lines full parapgraph</div>

该代码用于以不同的“速度”滚动每一部分，但我希望它应用于内容中的每一行。 (因此内容中的每一行都以不同的速度滚动)

编辑:内容不是硬编码的，它是通过 wordpress 管理员/用户生成的

Answer 1

我想如果每一行都动态地放入不同的<span>会解决问题。对你来说是个不错的开始:

$("p").each(function(i) {
  var pContent=$(this).text();
  $(this).html("<span id='line"+i+"-0'><span>");
  var lineID=0;
  while (pContent.length>0) {
    var firstSpace=pContent.indexOf(" ")+1;
    if (firstSpace==-1) firstSpace=pContent.length;
    var originalData=$("#temp-span").text();
    $("#temp-span").append(pContent.substring(0,firstSpace));
    if ($("#temp-span").width()>$(".container").width()) {
      $("#line"+i+"-"+lineID).text(originalData);
      $("#temp-span").text("");
      $(this).append("<span id='line"+i+"-"+(++lineID)+"'></span>");
    } else {
      pContent=pContent.substring(firstSpace,pContent.length);    
    }
  }
  if ($("#temp-span").text().trim()!="") {
    $("#line"+i+"-"+lineID).text($("#temp-span").text());
    $("#temp-span").text("");
  }
});
  $("pre").text($(".container").html());

#temp-span {
  width: auto;
  white-space: nowrap;
  display: none;
}

.container {
  width: 100vw;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
}

span {
  display: block;
}

pre {
  white-space: normal;
  background-color: #8ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis lacinia dui sit amet dapibus. Curabitur nec mi tellus. Nullam posuere auctor justo, vel ornare odio malesuada vitae. Sed ullamcorper libero sit amet est posuere, sed cursus metus tristique. Vestibulum varius erat at mi dapibus, quis scelerisque leo tempor. In auctor maximus tempus. Sed sed tristique est, nec auctor nulla. Aenean et porttitor ex, ac malesuada ipsum. Quisque sit amet urna pulvinar libero scelerisque maximus. Morbi ac tincidunt libero. Donec tempus suscipit hendrerit. Nulla et purus ultricies, eleifend augue vitae, egestas odio. Pellentesque ante libero, pulvinar quis orci quis, sodales tincidunt libero. Sed volutpat purus diam, quis gravida lacus commodo quis. Nunc interdum metus at condimentum gravida. Ut vulputate est non ultrices maximus.
  </p>
  <p>
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean pharetra dignissim mattis. Cras purus risus, accumsan a sapien eu, ultricies dictum diam. In hendrerit, erat efficitur sodales tristique, purus sapien dignissim magna, non vulputate dolor tellus vestibulum sapien. Suspendisse ullamcorper dolor sit amet nisl vulputate, vitae condimentum nunc sodales. Pellentesque ut ullamcorper quam. Quisque et mauris lacus. Suspendisse commodo facilisis mi. Suspendisse sit amet metus felis.
  </p>
  <span id="temp-span"></span>
  <h4>Code:</h4>
  <pre></pre>
 </div>