Question

我正在使用移动ePub阅读器。我想要实现的一个功能是添加可扩展的注释，这些注释与突出显示的单词相关联。

我想知道如何迭代创建的边缘集并应用我为每个高亮显示得到的背景颜色和偏移量。换句话说，每个边框应该具有与其高光相同的背景颜色，并且与屏幕顶部具有相同的偏移（以便两者对齐）。

谢谢，

＆＃13;

function Marginale(offset, color) {
  this.offset = offset;
  this.color = color;
}

(function createMarginalia() {

  let $highlights;
  $highlights = $('.highlight');

  $highlights.each(function() {

    let color, offset, screen;
    let $marginalia;

    color = $(this).css('backgroundColor');
    offset = $(this).position().top;
    screen = $('#screen');

    screen.append('<div class="marginale"></div>');

    $marginalia = $('.marginale');

    $marginalia.each(function() {
      $(this).css({
        'backgroundColor': color,
        'top': offset
      });
    });

  });

})();

(function hideNavOnScroll() {

  let nav, screen, yPos;
  nav = $('nav');
  yPos = 0;
  screen = $('#screen');

  screen.scroll(function() {
    let yOffset = $(this).scrollTop();

    if (yOffset > yPos) {
      nav.fadeOut();
    } else {
      nav.fadeIn();
    }

    yPos = yOffset;
  });

})();

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
  --dpi: 2;
  --texidiumGreen: #00857c;
  --slateGrey: #47484a;
  --lightGrey: #eee;
  --mediumGrey: #aaa;
  --redHighlightColor: rgba(255, 0, 0, 0.2);
  --greenHighlightColor: rgba(0, 255, 0, 0.2);
  --blueHighlightColor: rgba(0, 0, 255, 0.2);
  --yellowHighlightColor: rgba(255, 255, 0, 0.2);
  --grayHighlightColor: rgba(0, 0, 0, 0.2);
  --fontSize: 12.5px;
  --appBarHeight: 54px;
  --bottomBarHeight: 64px;
  --contentPadding: 40px;
  --marginaleSize: calc(var(--contentPadding) - 8px);
}

body {
  background-color: var(--lightGrey);
}

#phone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 30px var(--mediumGrey);
}

#screen {
  width: calc(750px / var(--dpi));
  height: calc(1334px / var(--dpi));
  overflow-y: scroll;
  background-color: white;
}

::-webkit-scrollbar {
  display: none;
}

#app-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--appBarHeight);
  background-color: var(--texidiumGreen);
}

#bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: var(--bottomBarHeight);
  background-color: var(--slateGrey);
}

.hide-nav {
  visibility: hidden;
}

#content {
  padding-right: var(--contentPadding);
  padding-left: var(--contentPadding);
  font-size: var(--fontSize);
  font-family: Roboto;
  line-height: 1.5;
}

h1:first-of-type {
  margin-top: calc(var(--fontSize) * 2 + var(--appBarHeight));
}

h1 {
  margin-top: calc(var(--fontSize) * 2);
  font-size: calc(var(--fontSize) * 2);
  font-weight: bold;
}

h2 {
  margin-top: calc(var(--fontSize) * 1.5);
  font-weight: bold;
}

p {
  margin-top: var(--fontSize);
}

p:last-of-type {
  margin-bottom: var(--fontSize);
}

.highlight.highlight-red {
  background-color: var(--redHighlightColor);
}

.highlight.highlight-green {
  background-color: var(--greenHighlightColor);
}

.highlight.highlight-blue {
  background-color: var(--blueHighlightColor);
}

.highlight.highlight-yellow {
  background-color: var(--yellowHighlightColor);
}

.highlight.highlight-gray {
  background-color: var(--grayHighlightColor);
}

.marginale {
  width: var(--marginaleSize);
  height: var(--marginaleSize);
  border-radius: 50%;
  line-height: var(--marginaleSize);
  color: white;
  /*background: black;*/
}

.marginale {
  text-align: center;
  cursor: pointer;
}

.marginale:before {
  font-family: FontAwesome;
  content: '\f249';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone">
  <div id="screen">
    <nav id="app-bar"></nav>
    <div id="content">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? <span class="highlight highlight-red">Numquam itaque velit dolor explicabo aut, laborum?</span>        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
      <h2>Dolor Sit Amet</h2>
      <p><span class="highlight highlight-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
        dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
      <p><span class="highlight highlight-yellow">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque
        velit dolor explicabo aut, laborum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-blue">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim?</span>        Numquam itaque velit dolor explicabo aut, laborum?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
        dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-gray">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
    </div>
    <nav id="bottom-bar"></nav>
  </div>
</div>

＆＃13;

使用jQuery动态应用CSS属性

0 个答案: