0
하나의 페이지를 개발 중입니다. 페이지 안에서 나는이 이미지들이 하나씩 퇴색하고 fadeOut 서로 후 배경 이미지를 갖고 싶다.전체 화면 배경으로 한 div
jQuery 함수로이 프로세스를 제어하고 있지만 다른 div (div가 포함 된 이미지)를 배경으로두면 어떻게됩니까?
div 레이아웃이 내 배경이되고 그 jQuery를 사용하여 변경해야합니다.
$(document).ready(function(){
// run every 7s
raiseToSunrise(1000)
});
function raiseToSunrise(interval) {
var num = 1;
var theinterval = setInterval(function() {
var $active = $('#wrapper .active');
console.log($active);
//var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first');
var $next = $active.next();
$next.css('z-index',1);//move the next image up the pile
$active.fadeOut(8000,function(){//fade out the top image
$active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',2).addClass('active');//make the next image the top one
});
num = num+1;
if (num == 4) {
clearInterval(theinterval);
return;
}
}, interval);
}
#layout {
position: absolute;
z-index:-1;
height:10%;
}
#layout img {
position: absolute;
z-index:0;
}
#layout img.active {
z-index:2;
}
.canvas {
z-index=10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"> \t \t \t
<div id="main"> \t \t \t \t
<!-- Header -->
<header id="header">
<div id="title">
<h1><img src="assets/css/images/img_logo.png"></h1> \t \t \t \t \t \t
</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div class="layout">
<img class="active" src="assets/css/images/img_background_night1.jpg" />
<img class="active" src="assets/css/images/img_background_sunrise1.jpg" />
<img class="active" src="assets/css/images/img_background_day1.jpg" />
</div>
<!-- \t <div id="wrapper_top" style="
position: relative;
z-index: 0;">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div id="#content"
style="
position: absolute;
z-index: 2;
color: #ffffff;">
</div>
<div id="wrapper_bottom"
style="
z-index: -1;
top: 0;
height: 100%;
position: absolute;
width: 100%;"
>
</div>
</div> -->
<div id="botton">
<nav>
<ul>
<li><a class='icon sensor_button sensor_up_right' id ='sensor_1' onclick="clickedSensor(0);" href="#"><img src="assets/css/images/img_sensor_1.png"></a></li>
<li><a class='icon sensor_button sensor_up_left' id ='sensor_2' onclick="clickedSensor(1);" ><img src="assets/css/images/img_sensor_2.png"></a></li>
<li><a class='icon sensor_button sensor_center' id ='sensor_3' onclick="clickedSensor(2);" ><img src="assets/css/images/img_sensor_3.png"></a></li>
<li><a class='icon sensor_button sensor_arm_right' id ='sensor_4' onclick="clickedSensor(3);" ><img src="assets/css/images/img_sensor_4.png"></a></li>
<li><a class='icon sensor_button sensor_arm_left' id ='sensor_5' onclick="clickedSensor(4);"><img src="assets/css/images/img_sensor_5.png"></a></li>
</ul>
</nav>
<div id='sensor_info' >
<div id='sensor_title'>
</div>
<div id='sensor_message'>
</div>
</div>
</div>
</header>
</div>
</div>
내가 이해한다면 나를 확인하자 –
바이올린을 만들어보십시오. '.layout' 안에 또 다른 div를 넣으시겠습니까? 그래서 이미지처럼 fadeIn/fadeOut이 될까요? –
아니요. 배경 이미지로 .layout을 사용하고 싶습니다. – snazi