아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

롤오버베너

구구 | 2012.06.13 14:06 | 조회 5128



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>롤오버 베너</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
 
 var colour = $("#overlay");
 var content = $("#hover");
 
 content.hide();
 colour.hide(); 
  
 $("#container").hover(function() {
  content.stop().show().css({ "left" : "-600px" }).animate({left : 0}, 300);
  colour.stop().fadeTo(500, .7)
 }
 ,function() {
  content.stop().animate({left : 600}, 300);
  colour.stop().fadeTo(500, 0)
 });
});

</script>
<style type="text/css">
body {
 background-color:#1e1e1e;
 padding-top:150px;
 font-size:12px;
 font-family:돋움;
 }
h1 {
 font-size:12px;
 font-weight:bold;
 color:#4de2e0;
 }
a {
 color:#4de2e0;
 text-decoration:none;
 }
#container {
 width:600px;
 height:400px;
 position:relative;
 overflow:hidden;
 z-index:0;
 padding:0;
 margin:0 auto;
 background:url(images/sample01.jpg) no-repeat center;
 border:10px solid #414141;
 }
#container:hover {
 border-color:#303030;
 }
#overlay {
 background-color:#000;
 display:block;
 position:absolute;
 top:0;
 left:0;

 /*위쪽 #container 박스 사이즈와 같게*/
 width:600px;
 height:400px;
 z-index:1;
 }
#hover {
 width:430px;
 display:block;
 height:100px;
 position:absolute;
 z-index:3;
 padding:25px;
 }
#hover p {
 color:#fff;
 font-weight:normal;
 }
</style>
</head>

<body>

<div id="container">
 <div id="overlay">
    </div>
    <div id="hover">
        <h1>여러가지 응용분야가 많아보이죠?</h1>
        <p>다양한 형태로 변형해보세요.. 블루비에서는 소스를 제공해주는것이지..꼭 이 소스를 이대로만 사용하라는 뜻은 아닙니다.</p>
  <p style="color:#FFCC66">마우스 아웃시 텍스트가 다시 슬라이딩 되면서 사라집니다.</p>
        <a href="#" style="dispacy:inline-block;background-color:#fff;padding:5px 10px;color:#666">&raquo; Read more</a></p>
    </div>
</div>


</body>
</html>

 

미리보기 : http://finalee99.cafe24.com/sos/rollover_view.html

twitter facebook me2day 요즘
98개(4/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
38 [jquery] 구글검색엔진으로 내홈페이지를 검색! 사진 첨부파일 구구 4284 2012.06.13 16:13
37 [jquery] 슬라이더로 구성한 홈페이지 샘플 사진 첨부파일 구구 4399 2012.06.13 15:57
36 [jquery] 메인이미지 버튼/시간/효과 사진 첨부파일 구구 5186 2012.06.13 15:52
35 [jquery] 하단으로 열리는 메뉴 기본 사진 첨부파일 구구 6375 2012.06.13 15:49
34 [html/css] 이미지없는 CSS버튼 사용해보자! 사진 첨부파일 구구 8627 2012.06.13 15:20
33 [Java] 마우스 스크롤을 좌우스크롤로 활용! 사진 첨부파일 구구 5499 2012.06.13 15:12
32 [모바일] 베너클릭시 슬라이드되는 내용들 사진 첨부파일 구구 6547 2012.06.13 15:04
31 [Java] 갤러리/앨범 스타일04 사진 첨부파일 구구 4484 2012.06.13 15:00
30 [Java] 갤러리/앨범 스타일03 사진 첨부파일 구구 5102 2012.06.13 14:50
29 [Java] 갤러리/앨범 스타일02 사진 첨부파일 구구 4238 2012.06.13 14:47
28 [Java] 클릭시 나오는 공간 (사이트맵정도로 사용) 사진 첨부파일 구구 4833 2012.06.13 14:35
27 [Java] 메인비쥬얼 효과 사진 첨부파일 구구 4412 2012.06.13 14:27
>> [Java] 롤오버베너 사진 첨부파일 구구 5129 2012.06.13 14:06
25 [Java] 네이트 베너 (랜덤으로 나오는 베너) 사진 첨부파일 구구 4648 2012.06.13 13:59
24 [Java] 부드럽게 내려오는 네비게이션 메뉴 첨부파일 구구 6355 2012.06.13 13:46
23 [html/css] 말풍선 툴팁 (모든브라우져 사용가능) 구구 14934 2012.06.13 12:58
22 [etc] 움직이는팝업창 구구 5362 2012.06.13 11:25
21 [etc] 원하는위치 원하는크기로 새창띄우기 구구 10248 2012.06.13 11:01
20 [Java] 갤러리/앨범 스타일01 깔끔한앨범 - 보기쉬운UI 첨부파일 관리자 6115 2012.06.12 18:57
19 [jquery] 반응형웹디자인 (미디어쿼리 / media query) 첨부파일 관리자 6150 2012.06.12 18:51