从标题后面落下横幅

时间:2012-12-28 06:42:16

标签: javascript

每当用户将鼠标悬停在标题后,我想让这个木横幅从标题后面“落下”。

enter image description here enter image description here

我在整个网络上搜索了至少一个如何做的例子。我找不到。我知道有一种叫做Google Gravity的东西,可以将对象放到页面底部。也许就是这样,只是我希望横幅根据绳索的长度而下降。现在我没有尝试任何东西,因为我根本不知道如何解决它。肯定有一些javascript正在进行中。 你们有人能帮我一把吗?

1 个答案:

答案 0 :(得分:1)

查看JQuery的animateslideDown

JQuery是一个javascript库,应该能够轻松完成这项任务,并且相对容易理解。

例如,如果您的图片具有ID drop,则可以执行以下操作:

在CSS中,将#drop选择器设置为display:none;让它隐身:

#drop { display:none }

在JQuery中,您可以使用相同的选择器使其在特定事件(点击,倒计时,鼠标悬停,无论哪个)后下拉。以下是横幅的鼠标悬停示例,标识为banner

$('#banner').mouseover(function(){
  $('#drop').slideDown();
});

您可以在html底部添加带有脚本标记的JQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>