像这样将动画附加到光标上吗?

时间:2018-09-20 23:45:29

标签: javascript jquery

我正在尝试在site上同时制作线条的动画。动画本身可以,但是我不能将其附加到光标上作为示例。这是代码jsfiddle.net。不幸的是,无法从该网站窃取。那里的一切都很混乱。 谢谢大家的帮助。

var starttime = new Date().getTime();

$('.js-line-wave').on('mouseenter, mousemove', function(e) {
  var elapsed = new Date().getTime() - starttime;
  var pos = elapsed * 0.1;

  $('.line, .button_wave, .line_item').each(function(index, letter) {
    var posx = (pos + 10 * index);
    console.log(posx);
    var posy = Math.sin(posx / 60) * 20;
    $(letter).css("transform", "translateY(" + posy + "px)");

  });


});
.wrapper {
  overflow: hidden;
  padding-bottom: 1000px;
}

section.tp_section {
  padding-top: 144px;
  padding-bottom: 88px;
}

.container {
  margin: 0 auto;
  position: relative;
  padding: 0 15px;
  width: 100%;
  max-width: 1196px;
}

.line_wave_block {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  margin: 95px 0 53px;
}

.line_wave_block .line {
  display: block;
  flex-basis: 100%;
  position: relative;
  z-index: -1;
}

.line_wave_block .line:before {
  content: '';
  width: 3px;
  height: 4px;
  display: block;
  background-color: rgba(0, 174, 239, 0.5);
  margin: 0 auto;
  border-radius: 50%;
}

.button_wave,
.line_item {
  position: relative;
  flex-basis: 100%;
  z-index: 3;
}

.button_wave {
  cursor: pointer;
  display: block;
}

.line_wave_block .button_wave::before {
  content: '';
  width: 33px;
  height: 20px;
  border-radius: 40px;
  display: block;
  background: linear-gradient(to bottom, #00EBDB, #008FF2);
}

.line_wave_block .button_wave:hover::before,
.line_wave_block .button_wave.active::before {
  background: linear-gradient(to bottom, #FF8070, #FF5971);
}

.tons_text {
  position: absolute;
  bottom: -54px;
  color: #5F42DF;
  font-size: 27px;
  line-height: 32px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.line_wave_block .line_item::before {
  content: '';
  width: 7px;
  height: 23px;
  border-radius: 40px;
  display: block;
  background: rgba(0, 174, 239, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">

  <section class="tp_section tp_block js-tp">
    <div class="container">

      <div class="line_wave_block js-line-wave">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave active" href="#tab1">
          <div class="tons_text">
            1,5
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave" href="#tab2">
          <div class="tons_text">
            3
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave" href="#tab3">
          <div class="tons_text">
            5
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave" href="#tab4">
          <div class="tons_text">
            10
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave" href="#tab5">
          <div class="tons_text">
            20
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>

    </div>
  </section>




</div>

enter image description here

0 个答案:

没有答案