모바일 브라우저 모양의 로딩바. 정보
모바일 브라우저 모양의 로딩바.
관련링크
http://anunnaki.nflint.com/
320회 연결
첨부파일
본문
DEMO : http://anunnaki.nflint.com/
CODE : (아래 내용이 다 입니다.G4, G5 공통 적용됨)
<style>
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
</style>
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
* 효과를 잘 보시라고 8px로 잡았는데 저는 보통 보일락 말락한 2px로 작업해 올리고는 합니다.
(오페라 빼고는 다 적용됨)
추천
17
17
댓글 14개
추천은 괴발자를 춤추게 합니다! 덩실~덩실~!
일단 닥추~~
감자합니다. 일단 즐퇴요~~!
멋지네요~^^
어디에 넣어주면 되나요?
'head.php'의 '상단 시작' 부분에 넣어주니 잘 구현되기는 합니다만...
어디에 넣어주면 되나요?
'head.php'의 '상단 시작' 부분에 넣어주니 잘 구현되기는 합니다만...
'head.php'
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
G5기준 default.css에
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
위의 두줄 넣어 주면 됩니다. z-index를 높게 잡아 놓아서 어지간하면 다 구현되야 정상입니다.
혹시라도 보이지 않는다면 관계하는 div의 "position:absolute"나 "z-index"의 연관성을 생각해 보시면 바로
답이 나올겁니다.
쉽게 구현하시려면 G5기준 25라인이나 26라인 부근
<!-- 상단 시작 { -->
<div id="hd">
의 위쪽에 넣고 해보세요.
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
G5기준 default.css에
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
위의 두줄 넣어 주면 됩니다. z-index를 높게 잡아 놓아서 어지간하면 다 구현되야 정상입니다.
혹시라도 보이지 않는다면 관계하는 div의 "position:absolute"나 "z-index"의 연관성을 생각해 보시면 바로
답이 나올겁니다.
쉽게 구현하시려면 G5기준 25라인이나 26라인 부근
<!-- 상단 시작 { -->
<div id="hd">
의 위쪽에 넣고 해보세요.
두가지 방법 모두 잘 되네요!
그런데... 여태 정적이다가... 페이지 전환시 마다 움직임이 생기니 아직 적응이 잘 안되네요~^^
높이는 2px로 줄였습니다.
그런데... 여태 정적이다가... 페이지 전환시 마다 움직임이 생기니 아직 적응이 잘 안되네요~^^
높이는 2px로 줄였습니다.
기나저나 간단함에 비해 많은 사랑을 주시네요. 성은이 망극하옵니다요!
감사합니다. 뭔가 색다르네요! 묵공님 사랑합니다.^^
<style type="text/css">
.loading { left:0; top:0; width:100%; height:8px; display:none;}
.loading div { background-color:#00aaaa; height:8px; width:0%; float:left; display:block; }
</style>
<div class="loading"><div></div></div>
<script type="text/javascript">
$(".loading").fadeIn(2000);
$(".loading div").animate({width:"10%"});
$(".loading div").animate({width:"100%"}, function() {
setTimeout(function() {
$(".loading").fadeOut(1000);
}, 1000);
});
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</script>
부드럽게 처리하고 싶어서 이렇게 수정했습니다.^^..
.loading { left:0; top:0; width:100%; height:8px; display:none;}
.loading div { background-color:#00aaaa; height:8px; width:0%; float:left; display:block; }
</style>
<div class="loading"><div></div></div>
<script type="text/javascript">
$(".loading").fadeIn(2000);
$(".loading div").animate({width:"10%"});
$(".loading div").animate({width:"100%"}, function() {
setTimeout(function() {
$(".loading").fadeOut(1000);
}, 1000);
});
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</script>
부드럽게 처리하고 싶어서 이렇게 수정했습니다.^^..
아 코드 이쁘네요.ㅎㅎㅎ
감사합니다.
감사합니다.
감사합니다.
오오오~ 멋져요.
감사합니다.!!!
감사합니다.!!!
감사합니다~~!!
모바일 브라우저 모양의 로딩바.
감사합니다^^
감사합니다^^
