随机悬停元素需要悬停在特定div上(Random hovering element needs to hover over specific div)

我已尝试对javascript进行大量更改，但我似乎无法做到正确。基本上我没有得到的功能是能够使悬停的幽灵div悬停在页面中的某个div或元素上，而不是只浮动到任何想要的位置。

$(document).ready(function(){ animateDiv(); }); function makeNewPosition(){ // Get viewport dimensions (remove the dimension of the div) var h = $(window).height() - 50; var w = $(window).width() - 50; var nh = Math.floor(Math.random() * h); var nw = Math.floor(Math.random() * w); return [nh,nw]; } function animateDiv(){ var newq = makeNewPosition(); var oldq = $('.shape').offset(); var speed = calcSpeed([oldq.top, oldq.left], newq); $('.shape').animate({ top: newq[0], left: newq[1] }, speed, function(){ animateDiv(); }); }; function calcSpeed(prev, next) { var x = Math.abs(prev[1] - next[1]); var y = Math.abs(prev[0] - next[0]); var greatest = x > y ? x : y; var speedModifier = 0.3; var speed = Math.ceil(greatest/speedModifier); return speed; } $(document).ready(function(){ $(".shape").show("slow"); $(".coupontooltip").show("slow"); }); $(document).ready(function(){ $(".coupontooltip").show("slow"); });

当前形势的小提琴

I have tried a boatload of changes to the javascript and I cannot seem to get it right. Basically the function I have failed to get is to be able to make the hovering ghost div hover over a certain div or element in the page instead of just floating wherever it wants to.

$(document).ready(function(){ animateDiv(); }); function makeNewPosition(){ // Get viewport dimensions (remove the dimension of the div) var h = $(window).height() - 50; var w = $(window).width() - 50; var nh = Math.floor(Math.random() * h); var nw = Math.floor(Math.random() * w); return [nh,nw]; } function animateDiv(){ var newq = makeNewPosition(); var oldq = $('.shape').offset(); var speed = calcSpeed([oldq.top, oldq.left], newq); $('.shape').animate({ top: newq[0], left: newq[1] }, speed, function(){ animateDiv(); }); }; function calcSpeed(prev, next) { var x = Math.abs(prev[1] - next[1]); var y = Math.abs(prev[0] - next[0]); var greatest = x > y ? x : y; var speedModifier = 0.3; var speed = Math.ceil(greatest/speedModifier); return speed; } $(document).ready(function(){ $(".shape").show("slow"); $(".coupontooltip").show("slow"); }); $(document).ready(function(){ $(".coupontooltip").show("slow"); });

A fiddle with the current situation

最满意答案

为了使它附加到某个div，你必须首先遵循这些：

传递要应用随机悬停div的元素。因此， animateDiv()应该是animateDiv(element) ，其中variable元素是要应用此div的DOM元素。

通过限制最大最小偏移高度和 .shape 重量的值来考虑动画来获取DOM元素。使用此var nh = Math.floor(Math.random() * (maxHeight - minHeight)) + minHeight;

考虑到.shape宽度和高度 ，以便它不会超出DOM元素。通过.shape高度/宽度减小maxHeight / maxWidth。

您修改后的makeNewPosition(element)将如下所示：

function makeNewPosition(element1) { var minHeight = $(element1).offset().top; var maxHeight = $(element1).height() + minHeight - 90; var minWidth = $(element1).offset().left; var maxWidth = $(element1).width() + minWidth - 90; var nh = Math.floor(Math.random() * (maxHeight - minHeight)) + minHeight; var nw = Math.floor(Math.random() * (maxWidth - minWidth)) + minWidth; return [nh, nw]; }

工作小提琴

PS已经降低了一点速度，所以效果在小div上看起来更舒服，你可以相应地设置它

To make it attach to certain div, you have to follow these first:

Pass the Element at which you want to apply the random hovering div. Therefore, animateDiv() should be animateDiv(element) where variable element is the DOM element at which you want to apply this div.

Take that DOM Element in consideration of animation by limiting the value of max-min offset height and weight of .shape.Use this var nh = Math.floor(Math.random() * (maxHeight - minHeight)) + minHeight;

Take .shape width and height in account also so that it doesn't go outside the DOM element. By Decreasing the maxHeight/maxWidth by .shape height/width.

Your revised makeNewPosition(element) will look like this:

function makeNewPosition(element1) { var minHeight = $(element1).offset().top; var maxHeight = $(element1).height() + minHeight - 90; var minWidth = $(element1).offset().left; var maxWidth = $(element1).width() + minWidth - 90; var nh = Math.floor(Math.random() * (maxHeight - minHeight)) + minHeight; var nw = Math.floor(Math.random() * (maxWidth - minWidth)) + minWidth; return [nh, nw]; }

Working fiddle

P.S. have decreased a speed little bit so the effect looks more pleasant on small div you can set it accordingly

更多推荐