이런 배너 만들려면 어려울까요 ?
본문
소스를 구매해도 되겠지만..
제가 요즘 공부를 하고 있기에 한 번 도전해보려고 하는데요..
이게 div와 자바로 가능할것 같은데...
흠 쉬울거 같지는 않고...
공부좀 하면 가능하겠죠 ?
http://www.blueb.co.kr/?c=25/46/60&cat=14&p=3&page=view&uid=89424
이 배너 만드는거에 도전해 보려구요...
답변 5
요즘 작동원리에 관한 궁금증이나 막힌곳을 물어보는 사람보다
그냥 본인이 원하는 소스를 찾아달라 하는 초보분들이 많은데요
공부하려 하시는 모습 멋집니다!
<div style="position: relative;">
<div class="banner banner1" style="width:500px; height:300px; background:#fff100;"><h3>1번배너</h3></div>
<div class="banner banner2" style="width:500px; height:300px; background:#cc0000; display: none;"><h3>2번배너</h3></div>
<div class="banner banner3" style="width:500px; height:300px; background:#2FB300; display: none;"><h3>3번배너</h3></div>
<div class="banner banner4" style="width:500px; height:300px; background:#ddd; display: none;"><h3>4번배너</h3></div>
</div>
<span style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner1').css('display','block');">1번배너</span>
<span style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner2').css('display','block');">2번배너</span>
<span style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner3').css('display','block');">3번배너</span>
<span style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner4').css('display','block');">4번배너</span>
참고로 제이쿼리는 로드하셔야 합니다 (모르시면 구글신검색)
구글신에게 소원을 비는 게 더 빠를 것 같네요.
관련 영어 키워드로 구글링만 잘하면 웬만한 건 다 무료로 공개되어 있더라구요.
구글신에게 소원이라니..ㅋㅋ 역시 재미있으신 답변..ㅋㅋ
jquery mega menu
로 검색하시거나
jquery animate정도로 검색해 보시면 비슷한 예제를 보실 수 있을겁니다.
넵 감사합니다.
이거 비슷한거 만들어 둔게 많았는데 어디 있는지 못찾겠네요.....ㅠㅠ
찾으면 스킨 자료실에 올려 볼께요....^^;;
넵 올려주시면 너무 감사하죵..
css와 자바스크립트에 대한 기본지식이 있다면 시간이 좀 소요되더라도 할만하겠으나, 그게 아니라면 난이도가 높을 것 같네요.
난이도가 높군요..감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
