jQuery在鼠标点击时创建div

Posted 2023-05-08

【中文标题】jQuery在鼠标点击时创建div

【英文标题】：jQuery create div on mouseclick

【发布时间】：2013-11-07 16:00:21

【问题描述】：

在我的网站上，我希望能够在单击鼠标时创建一个 div，该 div 应该在鼠标单击的位置旁边创建。然后我希望能够为这个 div 设置动画以飞离屏幕底部。

到目前为止，我有这个 jQuery 代码，它只是在单击时显示一个 div，但是我希望它在每次显示时都向下和关闭屏幕。谁能帮帮我。

$("#divId").hide();
$(".holder").click( function(event) 
    $("#divId").show().css( position:"absolute", top:event.pageY, left: event.pageX)
);

和一个 JSfiddle： http://jsfiddle.net/VZY6C/

【问题讨论】：

您尝试过的用于制作动画的代码在哪里？

【参考方案1】：

您可以轻松使用 jquery 的动画功能。

$(".holder").click( function(event) 
    $("#divId").show().css( position:"absolute", top:event.pageY, left: event.pageX).stop().animate(
        top: 800
    , 1000);
);

在本例中，您可以在 1 秒内将 top 属性从原来的值设置为 800。

然后，如果您希望它消失，它会离开您只需放置位置的框：相对；和溢出：隐藏；

小提琴：http://jsfiddle.net/CL3Lu/

编辑： 刚刚将 stop() 函数添加到链中。这会停止当前正在运行的动画。

新小提琴：http://jsfiddle.net/Bq3Dc/

如果您快速点击多次，您会看到差异。