Question

我有一个基于bootstrap的网站，它分为不同的部分。在一个名为features的部分中，我有三个图像，我想在用户导航到它时旋转或向下滚动到该部分，以及当用户将鼠标悬停在其上时。我知道如何在悬停时旋转图像，但在用户向下滚动到该部分时无法想到这样做。

html部分代码： -

<section id="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading dark">Features</h2>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg1.png" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg2.png" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg3.png" class="feature-size">
                </div>
            </div>
        </div>
    </div>
</section>

悬停时旋转图像的CSS： -

<style type="text/css">
    img { 
        transition: all 0.5s ease-in-out 0s; 
    }

    img:hover {
      cursor: default;
      transform: rotate(360deg);
      transition: all 0.5s ease-in-out 0s;
    }
</style>

每当用户转到该部分时，图像将旋转一次，并且还会悬停在图像上。请提供一种方法来使用CSS或普通的JavaScript。我不想使用像jquery这样的任何javascript插件。任何帮助都非常感谢。

Answer 1

您可以使用Waypoint js：http://imakewebthings.com/waypoints/

var waypoint = new Waypoint({
    element: document.getElementById('waypoint'),
    handler: function(direction) {
        console.log('Scrolled to waypoint!')
    }
})

在滚动期间到达该点时添加一个类。

Answer 2

使用JQuery plugin Appear可以让这更容易。

function toggleHover() {
  $(".feature-size").each(function() {
    $(this).toggleClass("hovered")
  });
}
$('#features').appear(function() {
  setTimeout(function() {
    toggleHover();
    setTimeout(toggleHover, 1000); //to revert the animation
  }, 1500);
});

并添加此css规则。

img.hovered {
  cursor: default;
  transform: rotate(360deg);
  transition: all 0.5s ease-in-out 0s;
}

随意更改超时秒数，因为我无法预测您可能想要的时间而无需动手

Answer 3

这是一个使用JavaScript的，但您需要根据要求进行一些调整。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            div{height: 100vh;}
        </style>
    </head>
    <body>
        <div>
            <script>

            </script>
        </div>
        <div>
            <script>

            </script>
        </div>
        <div id="foo" style="background-color:red;">
            <script>

            </script>
        </div>

        <script>
        function getPosition(el) {
            var xPos = 0;
            var yPos = 0;

            while (el) {
               if (el.tagName == "BODY") {
               // deal with browser quirks with body/window/document and page scroll
               var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
               var yScroll = el.scrollTop || document.documentElement.scrollTop;

               xPos += (el.offsetLeft - xScroll + el.clientLeft);
               yPos += (el.offsetTop - yScroll + el.clientTop);

               } else {
               // for all other non-BODY elements
               xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
               yPos += (el.offsetTop - el.scrollTop + el.clientTop);
          }

          el = el.offsetParent;
      }
      return {
      x: xPos,
      y: yPos
   };
}

// deal with the page getting resized or scrolled
window.addEventListener("scroll", checkPosition, false);
window.addEventListener("resize", checkPosition, false);

function checkPosition() {
  console.log(getPosition(myElement));
  console.log(position);

  if((getPosition(myElement)).y < 10 && (getPosition(myElement)).y > -10){
      alert("Here");
  }

}

var myElement = document.querySelector("#foo");
var position = getPosition(myElement);

        </script>
    </body>
</html>

Answer 4

您可以使用：target pseudo-class（MDN）

使用您给定的代码执行此类操作：

a {
  display: block;
  /* Just for demonstration */
  height: 100vh;
}

img { 
    transition: all 0.5s ease-in-out 0s;
}

:target img {
  cursor: pointer;
  transform: rotate(360deg);
}

:target img:hover {
  transform: rotate(720deg);
}

<a href="#features">Link to section</a>
<section id="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading dark">Features</h2>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
        </div>
    </div>
</section>

导航到特定部分时如何旋转图像？

4 个答案: