jquery – 在悬停时创建CSS“路径”

前端之家收集整理的这篇文章主要介绍了jquery – 在悬停时创建CSS“路径”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图生成一个“好的”CSS菜单使用(主要)CSS,但有一点点的 jQuery

我的总体想法是:

+------------------------+
|                        |
|                        |
|         +---+          |
|         |   |          |
|         |___|          | <-- Hover this center piece
|                        |
|                        |
|                        |
+------------------------+

+------------------------+
|     _                  |
|    |\                  | <-- All start moving up to top of screen
|      \  +---+          |
|         |   |          |
|         |___|          |
|                        |
|                        |
|                        |
+------------------------+

+------------------------+
| +---+                  |
| |   |                  |
| |___|                  |
|                        |
|  || All,but one       |
|  || moves down         |
|  \/                    |
|                        |
+------------------------+

+------------------------+
| +---+                  |
| |   |                  |
| |___|                  |
|                        |
|        One stays,|
| +---+  the rest move this way
| |   |  --->            |
| |___|                  |
+------------------------+

+------------------------+
| +---+                  |
| |   |                  |
| |___|              ^   | The rest move up
|                    |   |
|                    |   |
| +---+            +---+ |
| |   |            |   | |
| |___|            |___| |<-- Another stays
+------------------------+

完成:

+------------------------+
| +---+            +---+ |
| | 1 |            | 4 | |
| |___|            |___| |
|                        |
|                        |
| +---+            +---+ |
| | 2 |            | 3 | |
| |___|            |___| |
+------------------------+

然而,这假设将有四个div孩子,所以我试图生成一种’确定角度/位置’在jQuery中的方式(这是,说实话,不是太好)。

类似设计:

因此,最后,由于有四个div,它们将与中心成90度的间隔(360/4 div = 90度分开)。

如果有,比方说,六个孩子div;

360/6 = 60 degrees

因此它们将以60度间隔均匀间隔开。

我会在他们之间添加动画,所以为什么我一直在玩旋转等,但我只是不能好像抓住它:

我当前的样本是:

$(".wrap").hover(function(){
    var x =$(this).children().length; //Counts '.circles'
    var degree = 360 / x; //Gets angle
    var percent = 100 / x;
    var curPercent = percent;
    $(this).children().each(function (index) {
        $(this).css("transform","rotate(" + degree*index + "deg)");
        $(this).css("top",percent + "px");
        $(this).css("left",percent + "px");

        percent = percent + curPercent;
    });
});
.wrap{
    height: 300px;
    width: 300px;
    background: red;
    position: relative;
    transform-origin: center center;
    transition: all 0.8s;
}
.wrap:hover .circle{
    top: 0;
    left: 0;
}
.circle{
    transition: all 0.8s;
    position: absolute;
    height: 50px;
    width: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
</div>

Fiddle

会有人:

>(A):知道如何获得divs“旋转”指定的角度或距离相关的jQuery代码中指定的父?
>(B):获取“动画”重置悬停出来?
>(C):有什么想法我在说什么?

类似的实现(虽然不完全):

> Here
> This more so – 但这使用Sass(不想要)

解决方法

使用不同的方法,你会得到一个稍微不同的效果。您可以使用setTimeout和转换的时间来修改行为。

See the fiddle

+ function() {
  var to;
  $(".wrap").on('mouseenter',function() {
    var circles = $(this).children();
    var degree = (2 * Math.PI) / circles.length; //calc delta angle
    var transforms = [];

    // Calculate the position for each circle
    circles.each(function(index) {
        var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
        var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));

      transforms.push('translate(' + x + 'px,' + y + 'px)');
    });

    // Function to moves all the circles
    // We'll pop a circle each time and than call this function recursively
    function moveCircles() {
      var transform = transforms.shift();
      circles.css('transform',transform);

      circles.splice(0,1);
      if (circles.length) to = setTimeout(moveCircles,400);
    }

    moveCircles();
  });

  $(".wrap").on('mouseleave',function() {
    var circles = $(this).children().css('transform','');
    clearTimeout(to);
  });
}();
.wrap {
     height: 300px;
     width: 300px;
     background: red;
     position: relative;
     transform-origin: center center;
     transition: all 0.8s;
   }
   .circle {
     transition: all 0.8s;
     position: absolute;
     height: 50px;
     width: 50px;
     text-align: center;
     line-height: 50px;
     top: calc(50% - 25px);
     left: calc(50% - 25px);
     background: tomato;
     border-radius: 50%;
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="circle">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
  <div class="circle">4</div>
  <div class="circle">5</div>
  <div class="circle">6</div>
</div>
原文链接:https://www.f2er.com/jquery/185175.html

猜你在找的jQuery相关文章