마우스 위로 확장 가능한 배너

현재 내 고객이 마우스 오버시 확장되는 배너를 배치하라는 웹 사이트에서 작업 중입니다. 이 웹 사이트 (http://www.londontown.com/majorcampaigns/)와 유사합니다. 우리는 LondonTown.com 배너에 마우스를 가져 가면 광고가 확장되어 나머지 광고가 표시됩니다.마우스 위로 확장 가능한 배너

나는 최고 수준을 시도했지만 알아낼 수 없었다. 제발 도와주세요.

출처

2010-02-05 Silas Paul

"이상한 나라의 앨리스"목적을 위해 두 가지 기능을 정의했습니다. 이것은 유머입니다! 너는 높이에서 지나갈 때 너는 단 하나를 필요로한다.

귀하의 질문이 호버 분할을 확장하는 것과 관련하여 효과를 "애니메이트"하지 않았습니다 - 이것은 간단한 예제입니다.

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

출처

2010-02-05 14:15:23 Fenton

투명 영역이 있고 wmode=transparent 인 플래시 에서처럼 배너를 만들 수 있습니다.

처음에는 (마우스 오버하지 않음) 배너의 너비는 250px입니다. 마우스를 올리면 500px 너비로 확장됩니다. SWF가 자라는 것처럼 은으로 보입니다. 그러나 실제로는 투명한 배경으로 사이트의 맨 위에 둡니다.

출처

2010-02-05 14:17:53 MysticEarth

이것은 jQuery에서 정말 간단합니다. 애니메이션 효과가 필요한 경우 http://api.jquery.com/slideDown/

slideDown을 사용하면 부드러운 애니메이션 방식으로 DOM-elemets의 높이를 조작 할 수 있습니다.

행운을 빈다.

출처

2010-02-05 14:25:03

요소의 .hover()에 .animate() 함수를 사용할 수 있습니다.

소네의 코드를 jQuery로 수정했습니다.

자신의 HTML과

: 여기

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

를 작동 demo있어 : 여기

<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와 있습니다.
더 나은 이해를 위해 hover 및 animate을 확인하십시오.

출처

2010-02-05 14:34:13 Reigel

표시 한 예는 플래시를 사용하여 완료되었습니다. 메인 무비의 스테이지 크기는 배너의 '확장 된'크기와 같아야합니다. 이것을 할 수있는 많은 방법이 있습니다. 나는 그것을 시도하고 설명 할 것입니다.

stop()으로 첫 번째 프레임에 하나의 반복 동영상 클립을 넣습니다. 명령. 이 무비 클립은 확장되지 않은 상태의 배너를 보여줍니다. 그런 다음 전체 단계에 걸쳐 눈에 보이지 않는 버튼을 놓고 보이지 않는 버튼

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

그래서 영화가 진행하고 '확대'애니메이션을 보여줍니다 프레임 2에서 재생에 다음 ActionScript를 넣어. 롤아웃 기능을 사용하여 첫 번째 프레임으로 돌아갈 수 있습니다.

물론, 플래시 동영상은 HTML 파일에 포함될 때 wmode = transparent로 설정해야합니다.이

출처

2010-02-05 14:35:31 pixeltocode

체크 아웃 도움이되기를 바랍니다 : Expandable Banners

이 미디어 키트는 당신이 이제까지 자신의 확장 배너를 작성해야합니다 최고의 마지막 솔루션입니다.

당신이해야 할 모든 변화 3 가지입니다 :

변경 배너 파일의 위치.
배너 크기.
확장 할 방향입니다. (위, 아래, 왼쪽, 오른쪽, 가운데)

완료.

출처

2010-05-28 13:02:23

마우스 위로 확장 가능한 배너

답변

관련 문제