我似乎找不到像我想要的那样工作的 javascript(jQuery 或其他)效果。我希望有人能帮助我。
我正在开发一个项目,该项目在一个较大的 div 中包含 3 个内容框。我正在考虑添加一个“获取报价”按钮,当您单击“获取报价” 时,它将占据周围较大的 div 并放下它(想想 scooby doo(将书从书柜中拉出来,墙壁掉落)) 并让它在撞击时弹起,就像它实际上有重量一样。然后在用户填写“获取报价”表格后返回。
我希望这有点意义。 只要问你是否想要澄清,或者你是否希望我张贴它是如何工作的草图。
最佳答案
这是 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>
关于Javascript 掉落和反弹效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5052795/