鼠标悬停可展开横幅答案

【问题标题】：Expandable Banner on Mouse over鼠标悬停可展开横幅
【发布时间】：2010-02-05 14:00:45
【问题描述】：

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

我尽力了，但我无法弄清楚，请帮助我。

【问题讨论】：

标签： jquery html css flash

【解决方案1】：

您展示的示例是使用 Flash 完成的。主要电影的舞台大小应等于横幅的“展开”大小。有很多方法可以做到这一点，我会尝试解释一种。

您使用 stop() 将一个循环影片剪辑放在第一帧；命令。此影片剪辑显示非展开状态的横幅。然后你在整个舞台上放置一个隐形按钮，并将以下动作放在隐形按钮上

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

所以电影从第 2 帧开始播放，它显示了“展开”动画。您可以使用 rollout 函数返回到第一帧。

当然，当 Flash 影片嵌入 HTML 文件时，需要将其设置为 wmode=transparent。希望这会有所帮助

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您可以在 Flash 中创建带有透明区域和wmode=transparent 的横幅。

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

【讨论】：

【解决方案4】：

这对于 jQuery 来说真的很简单。如果您想要动画效果，请查看http://api.jquery.com/slideDown/

slideDown 让您以流畅的动画方式操纵 DOM 元素的高度。

祝你好运。

【讨论】：

【解决方案5】：

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

我用 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 以获得更好的理解。

【讨论】：

【解决方案6】：

查看：Expandable Banners

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

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

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

你已经完成了。

【讨论】：