2013-04-25 3 views
1

Jquery 및 배경 이미지와 관련하여 2 가지 질문이 있습니다.Jquery 깜박임 배경 이미지

<!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> 
<title>Dreamweaver test</title> 
<link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
</head> 
<body> 
<div id="outer"> 
<div id="container"> 
<div id="inner"> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 

그리고 내 CSS :

: 당신은 내가 내부 사업부와 내가 원하는 배경 이미지를 볼 수 있듯이

 @charset "utf-8"; 
/* CSS Document */ 
* {margin:0;padding:0} 
/* mac hide \*/ 
html,body{height:100%;width:100%;} 
/* end hide */ 
body { 
background-color: black; 
text-align:center; 
min-height:468px;/* for good browsers*/ 
min-width:552px;/* for good browsers*/ 
} 
#outer{ 
height:100%; 
width:100%; 
display:table; 
vertical-align:middle; 
} 
#container { 
text-align: center; 
position:relative; 
vertical-align:middle; 
display:table-cell; 
height: 468px; 
} 
#inner { 
width: 500px; 
height: 500px; 
text-align: center; 
margin-left:auto; 
margin-right:auto; 
background-image: url(mainpage.jpg); 
} 

은 다음과 같다 나는 간단한 HTML 페이지가 mainpageflickering.jpg라는 또 다른 이미지를 만들었습니다. 약간 다른 점이 있습니다. 그 이미지가 깜박 거리고 (깨진 램프처럼) jQuery로 할 수 있다고 생각합니다. 그러나 어떻게하는지 모르겠습니다. 그래서 이것들은 제 2의 질문입니다 :

jQuery가 배경 이미지를 사용하여 변경하도록 어떻게합니까? jQuery에 깜박임 (예 : 2 초 일반 이미지, 1 초 깜박임, 2 초 일반 이미지, 1 초 깜박임 (매번))을 알리는 방법은 무엇입니까?

나는 누군가가 나를 도울 수 있기를 바랍니다.

답변

1

LIVE DEMO

JQ :

var $FlickImg = $('#inner img'), c = 0; 

(function loop(){ 
    var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
})(); 

HTML :

<div id="inner"> 
    <img src="image.jpg"> 
</div> 

CSS :

#inner{ 
    background: url(backgroundImage.jpg); 
} 
+0

고마워요, 더 많은 이미지를 사용할 수 있는지 알고 있습니까? 원본 이미지를 덮는 1 개의 이미지 대신 3 또는 4라고 말하면됩니까? (jQuery의 초급) –