Javascript 掉落和弹跳效果

发布于 2024-10-17 23:48:40 字数 287 浏览 3 评论 0原文

我似乎找不到像我想要的那样工作的 javascript（jQuery 或其他）效果。我希望有人能帮助我。

我正在开发一个项目，该项目在一个较大的 div 中包含 3 个内容框。我正在考虑添加一个“获取报价”按钮，当您单击“获取报价”时，该按钮将采用较大的周围 div 并将其放下（想想史酷比（将书从书柜中拉出，然后墙壁掉落））并让它在撞击时弹起，就像它实际上有重量一样。然后在用户填写“获取报价”表单后返回。

我希望这有一点意义。只需询问您是否需要澄清，或者是否希望我发布其工作原理的草图。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄情伤 2024-10-24 23:48:40

这是 JQuery UI 中已经可用的功能。 http://jqueryui.com/demos/show/。
这就是你如何做到的

<style type="text/css">
#mydiv{
    width:300px;
    height:300px;
    background:red;
    display:none;
    margin-top:30px;
}
</style>

<button>clickme</button>
<div id="mydiv"></div>

<script type="text/javascript">
$('button').click(function(){
    $('#mydiv').toggle('bounce',300)
});
</script>

看到一个工作示例

你可以在 http://jsfiddle.net/TUFaw/ 使用切换，这意味着如果您再次单击该按钮，效果将恢复为隐藏该框。您可以使用许多可用的效果（遮蔽、剪辑、下降、爆炸、折叠、突出显示、膨胀、脉动、摇动、滑动、大小、缩放）。

如果您以前从未使用过 jQuery，请确保包含所需的 CSS 和 JS文件。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

This is an already available feature in JQuery UI. http://jqueryui.com/demos/show/.
This is how you do it

<style type="text/css">
#mydiv{
    width:300px;
    height:300px;
    background:red;
    display:none;
    margin-top:30px;
}
</style>

<button>clickme</button>
<div id="mydiv"></div>

<script type="text/javascript">
$('button').click(function(){
    $('#mydiv').toggle('bounce',300)
});
</script>

You can see a working example at http://jsfiddle.net/TUFaw/

I used toggle which means if you click on the button again, the effect will be revered back to hide the box. You can use many of the available effect (blind, clip, drop, explode, fold, highlight, puff, pulsate, shake, slide, size, scale)

If you never worked with jQuery before, make sure you include the required CSS and JS files.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

回复收藏 0 原文

~没有更多了~