Question

我目前正在一个网站上工作，我的客户要求我放置一个扩展鼠标悬停的横幅。与此网站类似（http://www.londontown.com/majorcampaigns/）。当我们将鼠标悬停在LondonTown.com Banner上时，它会展开并显示广告的其余部分。

我尝试了我的水平，但我无法理解，请帮助我。

Answer 1

您展示的示例是使用闪光灯完成的。主电影的舞台大小应该等于横幅的“扩展”大小。有很多方法可以解决这个问题。

你用一个停止（）将一个循环动画片段放在第一帧上;命令。此movieclip显示处于非展开状态的横幅。然后在整个舞台上放置一个隐形按钮，并将以下动作放在隐形按钮

上

button.rollOver = function() {
 gotoAndPlay (2);
}

所以电影从第2帧开始播放，第2帧显示“扩展”动画。您可以使用卷展栏功能返回第1帧。

当然，当flash动画嵌入到HTML文件中时，需要将其设置为wmode = transparent。希望这有帮助

Answer 2

对于“爱丽丝梦游仙境”的目的，我已经定义了两个功能。这很幽默！当你从高处经过时，你只需要一个。

我没有“动画”效果，因为你的问题是关于在悬停时扩展分部 - 所以这是一个简单的例子。

<div style="z-index: 1; height: 30px;">
    <div style="position: absolute; overflow:hidden; z-index: 3000; width: 500px; height: 30px; background-color: Aqua;" onmouseover="eatMe(this, 200);" onmouseout="drinkMe(this, 30);">
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

<script type="text/javascript">
var eatMe = function(elem, height) {
    elem.style.height = height + "px";
};

var drinkMe = function(elem, height) {
    elem.style.height = height + "px";
};
</script>

Answer 3

您可以使用透明区域和wmode=transparent在Flash中创建类似的横幅。

首先（没有悬停）横幅是250px宽度。当您将其悬停时，它会扩展为500px宽度。 看起来就像SWF正在增长，但实际上它位于具有透明背景的网站之上。

Answer 4

使用jQuery非常简单。如果您想要动画效果，请查看http://api.jquery.com/slideDown/

slideDown允许您以平滑的动画方式操纵DOM-elemets的高度。

祝你好运。

Answer 5

您可以在元素.animate()上使用.hover()函数。

我用jQuery修改了Sohnee的代码。

用他的HTML：

   <div style="z-index: 1; height: 300px; width:300px;background-color: blue;" >
    <div class='block' style="position: absolute; overflow:hidden; z-index: 3000; width: 200px; height:200px; background-color: Aqua;">
      <p class='banner' style='display:none'>I'm a banner that goes out when I needed to.</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

这是一个jQuery：

$(".block").hover(function(){
  $(this).animate({"width": "350px"}, 1000);
  $('p.banner').toggle('slow');
},function(){
  $(this).animate({"width": "190px"}, 500);
  $('p.banner').toggle('slow');
});

这是一个有效的demo 请查看hover和animate以便更好地理解。

Answer 6

退房：Expandable Banners

此媒体工具包是您创建自己的可扩展横幅所需的最佳和最后解决方案。

您需要做的就是改变三件事：

更改横幅文件的位置。
您的横幅尺寸。
它将扩展到的方向。（上，下，左，右，中心）

你的完成。

鼠标悬停的可扩展横幅

6 个答案: