Question

我有一个自动收报机，但有时文字可能会很长。我修改了原始webkit代码，允许用户在用户将鼠标悬停在其上时暂停代码，但我喜欢的是用户能够来回拖动代码文本。 / p>

我不是很擅长jQuery，所以有没有办法使用JavaScript / CSS？

＆＃13;

.marquee {
  width: 800px;
  max-width: 100%;
  height: 25px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #F00;
  background: GhostWhite;
  color: #000;
  font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

.marquee span:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Make it move */
@keyframes marquee {
  0%   {transform: translate(0, 0)}
  100% {transform: translate(-100%, 0)}
}

＆＃13;

<p class="marquee"><span>Just some dummy text</span></p>

＆＃13;

Answer 1

如果您打开使用库，jQuery UI有一个可以使用的内置拖动功能。

您可以下载自定义版本here。

＆＃13;

$("#drag-me").draggable({
  axis: "x"
});

＆＃13;

.marquee {
  width: 800px;
  max-width: 100%;
  height: 25px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #F00;
  background: GhostWhite;
  color: #000;
  font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  cursor: default;
}

.marquee span:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0)
  }
  100% {
    transform: translate(-100%, 0)
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<p class="marquee"><span id="drag-me">Just some dummy text</span></p>

＆＃13;

Answer 2

I am Addting @-webkit-keyframes  safari and chrome browser compatible   /* Safari 4.0 - 8.0 */ 

   .marquee {
      width: 800px;
      max-width: 100%;
      height: 25px;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
      border: 1px solid #F00;
      background: GhostWhite;
      color: #000;
      font-size: 20px;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 20s linear infinite;
    }

    .marquee span:hover {
      -moz-animation-play-state: paused;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }




   /* Standard syntax */
    @keyframes marquee {
      0%   {transform: translate(0, 0)}
      100% {transform: translate(-100%, 0)}
    }


    /* Safari 4.0 - 8.0 */
     @-webkit-keyframes marquee {
      0%   {transform: translate(0, 0)}
      100% {transform: translate(-100%, 0)}
    }


    <p class="marquee"><span>css marquee code with webkit browser compatible</span></p>

是否可以来回拖动webkit选框？

2 个答案: