<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#pic1{width: 30%px; height: 30%px; /* 작게 */}

/* 썸네일 이미지를 올려놓을 갤러리 스타일 */
#gallery {
    border: 10px solid #1D0C16; /* 굵은 테두리 */
    height: 800px; /* 높이 */
    width: 450px; /* 너비 */ 
    margin-left: auto; /* 여백 자동 */
    margin-right: auto;
    overflow: visible; /* 오버플로일 경우 visible로 */
    /* 내가 div를 300x300크기로 만들었는데
            그 안에 이미지를 600x700짜리를 넣었다면 삐져나온 부분을 보이게 할것인가 */
    
    background: #272229; /* 배경색 */
    -webkit-box-shadow: #272229 10px 10px 20px; /* 박스 그림자  google chrom*/ 
    -moz-box-shadow: #272229 10px 10px 20px;/* fire fox */
    filter: progid:DXImageTransform.Microsoft.Shadow(
    color='#272229', Direction=135, Strength=10);/* explorer */     
     box-shadow: #272229 10px 10px 20px;/* 일반적 */
}

/* 썸네일 목록 전체 스타일 */
#gallery ul{
    margin-left:-30px; /* 갤러리 가운데에 콘텐츠가 올 수 있도록 */
}

/* 썸네일 각 항목에 대한 스타일 */
#gallery ul li {
    list-style:none;  /* '.'같은 불릿 없앰 */
    display:inline-table; /* 테이블 스타일로 배치*/
    padding:10px;       /* 안여백은 각각 10px로 */
 }
 
/* 평소 큰 이미지 .pic 에 대한 스타일 */
#gallery ul li #pic2{
    -webkit-transition: all 0.6s ease-in-out; /* 웹킷 브라우저에서 트랜지션 효과가 나타나도록 */
   opacity:0; /* 페이드아웃 효과 */
   visibility:hidden; /* 처음에는 보이지 않게 */ 
   position:absolute; /* 고정 위치 */
   margin-top:10px; /* 상단 여백 */
   margin-left:-20px; /* 왼쪽으로 20픽셀 이동해서 */
   border:1px solid black; /* 검은색 테두리 그림 */
   -webkit-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */
   -moz-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',
    Direction=135, Strength=5); /* 박스 그림자 */
   box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */ 
} 

#gallery ul li #pic1:hover{
    cursor:pointer;
}

/* 썸네일 이미지 위로 마우스 오버했을 때 큰 이미지의 스타일 * */
#gallery ul li:hover #pic2{
   width:320px; /* 너비 */
   height:240px; /* 높이 */
   opacity:1; /* 불투명하게 */
   visibility:visible; /* 화면에 보임 */
   float:right; /* 오른쪽으로 플로팅 */
   }

</style>
</head>
<body>
	
	<div id="gallery">
	 <ul>
	  <li>
		<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_15.jpg">
		<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_15.jpg">
	  </li>
	   <li>
		<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_137.jpg">
		<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_137.jpg">
	  </li>
	  <li>
		<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_106.jpg">
		<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_106.jpg">
	  </li>
	 </ul>
	 <!-- <div>
	 	<img id="pic2">
	 </div> -->
	 
	</div>
</body>
</html>


참조: http://sogangori.com/www/studyHTML03_04.action



저작자표시 비영리

'JavaScript > JQuery' 카테고리의 다른 글

jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
이미지 바꾸기2  (0) 2012.05.31 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" > </script>
 <script>
   <!--
    //count변수를 초기화  var를 붙이면 전역변수
    //변수를 초기화 하지 않으면 쓰레기 값이 들어갈 수 있다
    var nCount=0;//ani0.jpg ,ani1.jpg ,ani2.jpg ,ani4.jpg
    var $img1=null; //<img id="img1"..>을 가리키는 변수로 사용하자
    var $panel2=null;//<div id="panel">를 가리키는 변수
         
    /* button.setOnClickListener(new OnClickListener(){
	   onClick(View v){
		   // 버튼을 클릭하면 여기있는 코드를 실행해라
	   }
	});  아래의 문장은 이 구조와 같으므로 눈여겨 봅니다 */
    
	$(document).ready(function(){//문서를 다 읽고나면은 실행해라
       init();
       start();
    });

   	function init(){
   		//왼쪽은 var $img1=null;로 선언했던변수, 변수를 초기화
    	$img1=$("#img1"); //id가 img1인 태크 css로 치면 #img1(width:300px)
    }
    function start(){
    	//setInterval(함수, 초 ms) 초마다 한번씩 함수를 호출한다 
    	//setInterval(this.changeImage, 1000) 로 써도 좋다 ,()빼도 좋다
    	setInterval(changeImage, 2000);//2초마다 changeImage를 실행해라
    }
    function changeImage(){//2초마다 실행된다.
    	if(this.nCount>=5) nCount=0;// 0,1,2,3,4,0,1,2,3,4,0...
    	
    	//<img src=".image/ani0.jpg" id="img1">
    	//id가 img1인 태그의 속성중에 src속성의 값을 2번째 파라미터로 바꿔라
    	this.$img1.attr("src", "image/ani"+ nCount + ".png");
    	nCount++ ;
                           
    }
    //-->
 </script>
	
</head>
<body>
		<div>
                <h4>미션3 - 2초에 한번씩 이미지를 순차적으로 변환시켜 주세요
                <br/> 단, 이미지는 9개가 있습니다. 9개가 출력된 경우 다시 첫번째
                이미지부터 출력시켜 주세요. </h4>   
                <div id="panel"> 
                        <img width="300px" height="300px"   
                        id="img1" src="./image/ani0.png" alt="이미지">
                </div>
                <div id="panel2">
                        ^^
                </div>
        </div>
</body>
</html>







저작자표시 비영리

'JavaScript > JQuery' 카테고리의 다른 글

jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
jquery-slicing  (0) 2012.06.07

+ Recent posts

티스토리툴바