소셜커머스 사이트 보면 사이트 제일 위에 가로배너 있자나요!
X 눌르면 사라지고....
이거 배너 이름을 뭐라고 하나요??
이렇게 제작하고 싶은데 어렵네요..ㅠㅠ
배너이름은 무엇이고, 어딜가면 이런 소스 얻을 수 있을까요?
X 눌르면 사라지고....
이거 배너 이름을 뭐라고 하나요??
이렇게 제작하고 싶은데 어렵네요..ㅠㅠ
배너이름은 무엇이고, 어딜가면 이런 소스 얻을 수 있을까요?
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 1개
간단하게 저런 형식의 배너라면
최상단의 구조 위에 div 로 영역을 잡고,
이미지 구조를 잡는 영역안에 이미지를 넣은 후, 버튼을 제이쿼리로 제어하면 될거 같습니다.
위 내용을 설명하기 좋게 몬스터급 할인폭격까지의 내용만 있다고 가정하고 설명하면,
HTML
<div class="top_banner_area">
<div class="top_banner">
<img src="배너주소" alt="딱 일주일간 몬스터급 할인폭격" />
</div>
<span class="btn_hide">
<a href="#close">
<img src="버튼주소" alt="배너닫기" />
</a>
</span>
</div>
CSS
.top_banner_area {position:relative;width:100%;padding:0 0 0 30px;}
.top_banner {width:1000px;}
.btn_hide {position:absolute;top:40px;right:10px;}
jQuery
var $trigger = $(".btn_hide a"),
$cont = $(".top_banner_area");
$trigger.bind("click",function(){
$cont.hide();
});
이와같이 간단하게 만들수 있을거 같습니다.
만약 배너가 사라질때 모션이 있다거나 한다면
$cont.hide(); 부분을 slidUp() 등으로 대체 할수도 있을거 같네요.
응용은 이 부분에 대해서 공부 하시면 충분히 할 수 있을거에요.