Расширяемый баннер над мышью

Question

В настоящее время я работаю над веб-сайтом, где мой клиент попросил меня разместить баннер с надписью Mouse Over. Аналогично этому сайту (http://www.londontown.com/majorcampaigns/). Когда мы наведем курсор на баннер LondonTown.com, он просто развернется и покажет остальную часть рекламы.

Я старался изо всех сил, но я не мог понять это, Пожалуйста, помогите мне.

Answer 1

пример, который вы показали, сделан с использованием flash. размер сцены основного фильма должен быть равен «расширенному» размеру баннера. Есть много способов сделать это, я попытаюсь объяснить один из них.

Вы помещаете один цикличный мувиклип в 1-й кадр с остановкой (); команда. этот мувиклип показывает баннер в нераскрытом состоянии. затем вы помещаете невидимую кнопку на всю сцену и помещаете следующий сценарий действия на невидимую кнопку

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

, поэтому фильм запускается и воспроизводится из кадра 2, в котором показана «расширяющаяся» анимация. Вы можете использовать функцию свертывания, чтобы вернуться к 1-му кадру.

конечно же, флэш-фильм должен быть установлен на wmode = прозрачный, когда он встроен в файл HTML. надеюсь, это поможет

Answer 2

Выезд: Расширяемые баннеры

Этот Media Kit - лучшее и последнее решение, которое вам когда-либо понадобится для создания собственных расширяемых баннеров.

Все, что вам нужно сделать, это изменить 3 вещи:

1. Измените расположение файлов вашего баннера.
2. Размеры ваших баннеров.
3. Направление, в котором оно будет расширяться. (вверх, вниз, влево, вправо, по центру)

Ваш готов.

Answer 3

Вы можете использовать функцию .animate() для .hover() элемента.

Я немного изменил код Сони с помощью jQuery.

с его 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');
});​

вот рабочая демоверсия .
пожалуйста, посмотрите на hover и animate для лучшего понимания.

Answer 4

Это действительно просто с jQuery. Если вы хотите эффект анимации, взгляните на http://api.jquery.com/slideDown/

slideDown позволяет плавно управлять высотой DOM-элементов.

Удачи.

Answer 5

Вы можете создать такой баннер во Flash с прозрачной областью и wmode=transparent.

Сначала (без наведения) баннер, скажем, шириной 250 пикселей. Когда вы наводите его, он расширяется до ширины 500 пикселей. Это выглядит как SWF растет, но на самом деле он лежит поверх сайта с прозрачным фоном.

Answer 6

Для целей «Алиса в стране чудес» я определил две функции. Это юмор! Вам нужен только один, когда вы проходите в высоту.

Я не "анимировал" эффект, поскольку ваш вопрос касался расширения деления при наведении - так что это простой пример.

<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>