Question

我有一个圆圈，我必须使用鼠标滚轮或箭头旋转360度，但是当圆圈接触蓝色边框时它将开始。现在，当我滚动它并触摸蓝色边框时，我的代码正常工作。但我必须使用鼠标滚轮滚动圆圈。我的意思是使用鼠标滚轮我必须旋转圆圈也是反向。

有什么想法吗？

$(window).bind('scroll', function() {
  var l_360 = document.getElementById("l_360");
  var controller = new ScrollMagic.Controller();
  var tween = TweenLite.to(l_360, 3, {
    x: -1910,
    y: 350,
    rotation: 360,
    opacity: '1',
    ease: Linear.easeOut
  });
  var scene = new ScrollMagic.Scene({
      triggerElement: "#l_360"
    })
    .setTween(tween)
    .setClassToggle('#l_360', 'fade-in')
    .addTo(controller);

});

.parent_img {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  text-align: right;
}

.content,
.content_2,
.content_3 {
  width: 700px;
  position: relative;
}

.content {
  margin-top: 400px;
}

.main_l {
  position: fixed;
  right: 115px;
  top: 20px;
  z-index: 100;
}

.main_l .l_circle {
  width: 250px;
  height: 250px;
  background-color: #EFBD40;
  border-radius: 50%;
  display: flex;
}

.main_l .l_circle h2 {
  margin: auto;
  color: #fff;
  font-size: 35px;
}

.blue {
  background-color: #0082ff;
  transform: skew(0deg, -10deg);
  z-index: -1;
  /*color: #fff;*/
}

.blue .container {
  transform: skew(0deg, 10deg);
  position: relative;
  top: 50px;
}

<div class="main_l" id="l_360">
  <div class="l_circle">
    <h2>360 circle</h2>
  </div>
</div>

<div class="blue">
  <div class="container">
    <div class="content">
      <h2>This is just for testing</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

Answer 1

使用wheel事件将为您提供滚动方向的方向的增量。例如，要检测垂直车轮移动，属性deltaY将为负值（向前）或正向（向后）：

如果您愿意，可以直接使用该值，但可能会因浏览器和系统而异。

示例

var div = document.querySelector("div"); var angle = 0; document.onwheel = function(e) { if (e.deltaY) { // we have a wheel for vertical (common) direction e.preventDefault(); angle += e.deltaY < 0 ? 4 : -4; // what direction? div.style.transform = "rotate(" + angle + "deg)"; // do something } };

body {margin:30px} div {border-radius:50%;border:3px solid #09f;width:150px;height:150px;}

<div> O</div>

如何使用鼠标滚轮滚动圆圈？

1 个答案: