在悬停上创建CSS“路径” [英] Creating a CSS 'path' on hover

查看：134 发布时间：2017/2/4 20:55:12 jquery css css3 css-position css-transitions

本文介绍了在悬停上创建CSS“路径”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用（主要是）CSS生成一个niceCSS菜单，但使用小 / JQueryrel =nofollow noreferrer> jQuery ：

我的整体想法是：

  + ------------------------ + 
 | | 
 | | 
 | + --- + | 
 | | | | 
 | | ___ | | & -   - 悬停在这个中心块
 | | 
 | | 
 | | 
 + ------------------------ + 
 
 + ----------- ------------- + 
 | _ | 
 | | \ | <  - 所有开始向上移动到屏幕顶部
 | \ + --- + | 
 | | | | 
 | | ___ | | 
 | | 
 | | 
 | | 
 + ------------------------ + 
 
 + ----------- ------------- + 
 | + --- + | 
 | | | | 
 | | ___ | | 
 | | 
 | ||所有，但一个| 
 | ||下移| 
 | \ / | 
 | | 
 + ------------------------ + 
 
 + ----------- ------------- + 
 | + --- + | 
 | | | | 
 | | ___ | | 
 | | 
 |一个，| 
 | + --- +其余的移动方式
 | | | ---> | 
 | | ___ | | 
 + ------------------------ + 
 
 + ----------- ------------- + 
 | + --- + | 
 | | | | 
 | | ___ | ^ |其余的向上移动
 | | | 
 | | | 
 | + --- + + --- + 
 | | | | | | 
 | | ___ | | ___ | |<  - 另一个留下
 + ------------------------ +

完成：

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

然而，这假定将有四个div孩子，所以我试图生成一种'确定角度/位置'在jQuery中的方法（这，坦白说，不是工作太好）。

类似的设计：

img src =https://i.stack.imgur.com/Sz13J.pngalt =在这里输入图片说明>

最后，由于有四个div，它们将以90度的间隔距离中心（360/4 divs = 90度分开）。

如果有六个子div;

  360/6 = 60度

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

我会在它们之间添加动画，所以为什么我一直在玩旋转等等，但我似乎不能抓住它： / p>

我当前的示例是：

  $（。wrap）。hover（function（）{var x = $（this）.children（） // Counts'.circles'var degree = 360 / x; //得到角度var百分比= 100 / x; var curPercent = percent; $（this）.children（）。（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;背景：红色;位置：相对; transform-origin：中心; 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 = ：//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>

小提琴

< hr>

有人：

（A）：知道如何获得divs to'rotate'the specified angle or distance in relevant relevant to the parent specified in the jQuery code？

（B）：获取'animation'

（C）： ~~有任何想法我在说什么吗？~~ >

类似的实现（虽然不完全）：

这里

这样更好，但这使用 Sass （不需要）

解决方案

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

查看小提琴

  + function（）{var to; $（。wrap）。on（'mouseenter'，function（）{var circles = $（this）.children（）; var degree =（2 * Math.PI）/ circles.length; var transforms = []; //计算每个圆的位置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 + '）;}）; //移动所有圆的函数//我们每次都会弹出一个圆，并且递归调用这个函数function moveCircles（）{var transform = transforms.shift（）; circles.css '; transform）; circle.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;背景：红色;位置：相对; 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）;背景：番茄; 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>

I'm trying to generate a 'nice' CSS menu using (mainly) CSS, but with a tiny bit of jQuery as well:

My overall idea is:

+------------------------+
|                        |
|                        |
|         +---+          |
|         |   |          |
|         |___|          | <-- 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
+------------------------+

Complete:

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

However, that presumes that there will be four div children, So I'm trying to generate a way of 'determining the angle/position' in jQuery (which, to be honest, isn't working too well).

Similar design:

So in the end, since there are four divs, they will be at 90 degree intervals from the center (360/4 divs = 90 degrees apart).

If there were, say, six child divs;

360/6 = 60 degrees

So they will be evenly spaced out at 60 degree intervals.

I'll be adding animation as well between them, so hence why I've been playing about with rotations, etc., but I just can't seem to get to grips with it:

My current sample is:

$(".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

Would anyone:

(A): Know how to get the divs to 'rotate' the specified angle or distance in relevance to the parent specified in the jQuery code?
(B): Get the 'animation' to reset on hover out?
(C): ~~Have any idea what I'm talking about?~~

Similar implementations (although not exact):

Here
This more so - but this uses Sass (not wanted)

解决方案

Using a different approach you'll get a slightly different effect. You can play with the times of the setTimeout and the transition to modify the behavior.

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>

这篇关于在悬停上创建CSS“路径”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在悬停上创建CSS“路径” [英] Creating a CSS 'path' on hover

问题描述

查看小提琴

See the fiddle

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在悬停上创建CSS“路径” [英] Creating a CSS &#39;path&#39; on hover

问题描述

查看小提琴

See the fiddle

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

在悬停上创建CSS“路径” [英] Creating a CSS 'path' on hover

登录关闭