gpt4 book ai didi

javascript - 苹果电脑 : Apple dock bouncing effect

转载 作者:行者123 更新时间:2023-11-28 20:58:22 41 4
gpt4 key购买 nike

我正在寻找条形的弹跳效果。如果您注意到在 Mac 中,所有应用程序都排列在扩展坞中。当您单击任何应用程序时,图标就会开始弹起。我正在寻找类似的效果。条形需要弹跳 3 次,然后停止一两秒,然后再次弹跳 3 次。

这是我目前正在做的事情,但没有帮助

$(function () {
function bounceDiv(){
$("#six").effect("bounce", { times:3, distance:20 }, 400);
}
setInterval(bounceDiv,1000);
});

提前致谢。

最佳答案

您可以使用 jQuery/JavaScript 尝试神奇的弹力效果

enter image description here

我们的目标是创建一个包含 4 个框 (DIV) 的 HTML 页面。单击这些框中的每一个都会将它们弹向特定方向。我们可以通过 jQuery 方法的参数来控制元素弹跳的方向和速度。

HTML

<table>
<tr>
<td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
<td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
<td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
<td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

CSS

div {
padding:5px;
width:150px;
height:100px;
text-align:center;
}
#bouncy1 {
background-color:#FFEE88;
}
#bouncy2 {
background-color:#EE88FF;
}
#bouncy3 {
background-color:#EE8888;
}
#bouncy4 {
background-color:#88EEFF;
}

JavaScript

$(function(){

//Add bounce effect on Click of the DIV
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});

$('#bouncy2').click(function () {
$(this).effect("bounce", { direction:'left', times:5 }, 300);
});

$('#bouncy3').click(function () {
$(this).effect("bounce", { direction:'right', times:5 }, 300);
});

$('#bouncy4').click(function () {
$(this).effect("bounce", { direction:'down', times:5 }, 300);
});

//Bounce all DIVs on click of button
$("#bounceAll").click(function(){
$("div").click();
});
});

演示地址:Fantastic Bouncy Effect using jQuery/JavaScript

对于您的 JavaScript

$(document).ready(function(){
$("div").click();
});

在你的 JavaScript 中

$(function () {
function bounceDiv(){
$("#six").effect("bounce", { times:3, distance:20 }, 400);
}
setInterval('bounceDiv()', 1000);
});

您忘记了'! :(

来源:http://viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

关于javascript - 苹果电脑 : Apple dock bouncing effect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11643080/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com