大佬教程收集整理的这篇文章主要介绍了jquery – 在悬停时创建CSS“路径”,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的总体想法是:
+------------------------+ | | | | | +---+ | | | | | | |___| | <-- 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>
会有人:
>(A):知道如何获得divs“旋转”指定的角度或距离相关的jQuery@L_696_8@中指定的父?
>(B):获取“动画”重置悬停出来?
>(C):有什么想法我在说什么?
类似的实现(虽然不完全):
> Here
> This more so – 但这使用Sass(不想要)
+ 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('mou@R_607_10288@ave',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>
以上是大佬教程为你收集整理的jquery – 在悬停时创建CSS“路径”全部内容,希望文章能够帮你解决jquery – 在悬停时创建CSS“路径”所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。