만두야닷컴

jquery 로 슬라이드배너를 만들때 주로 bxslider 를 사용하는데

고쳐져야할 오류가 몇가지 보이네요..

 

 

일단 처음 페이지에 접속 했을때 이미지들이 쭉 나열 되면서 페이지 레이아웃이 깨져서 보이는 부분인데..

이부분은 먼저 레이아웃을 잡기전엔 슬라이더 영역을 안보이게 하고, 로딩이 완료 된 후에 보이게 하는 방식으로

처리를 하면 된다.

<div id="edd" style="visibility:hidden;opacity:0"> <ul class="bxslider"> <li><img src="/image/banner/main_banner_01.jpg"/></li> <li><img src="/image/banner/main_banner_01.jpg"/></li> <li><img src="/image/banner/main_banner_01.jpg"/></li> </ul> </div>

위와 같이 bxslider를 둘러싸고 있는 div 를 하나 만드신 후 style="visibility:hidden" 을 주시고

새로고침 해보시면 해당 영역은 잡혀 있는데 이미지는 보이지 않으실 겁니다.

 

그럼 이제 bxslider이 완료 되면 해당 부분을 다시 보이게 처리 해야 합니다.

<script type="text/javascript"> $(document).ready(function() { $('.bxslider').bxSlider({ mode: 'vertical', slideMargin: 5, pager:false, onSliderLoad: function(){ $("#edd").css("visibility", "visible").animate({opacity:1}); } }); }); </script>

 

위와 같이 onSliderLoad 부분을 넣으시면 슬라이더 로딩이 완료 되면 #edd 의 visibility 를 visible 로 변경 해라 이런 뜻입니다.

이렇게 처리하면 따로 잡힌 영역이 깨지지 않고 레이아웃이 잡히고, bxslider 가 로딩이 완료 된 후에 해당 영역에 출력이 됩니다.

 

 

다른 이슈는 ie에서 무한으로 이미지로딩만 출력 되는 현상인데 이부분은 다음에 다시 올리도록 하겠습니다.

Comment +0


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style type="text/css">
		#diva {
			height:2500px;
		}
		#scrollBtn1,#scrollBtn2 {
			cursor:pointer;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){

			$("#scrollBtn1").click(function(){
				//divb의 top의 위치 값으로 이동
				var pos=$("#divb").position().top;
				$("html, body").animate({scrollTop:pos},'slow');
			});

			$("#scrollBtn2").click(function(){
				$("html, body").animate({scrollTop:0},'slow');
			});
		});
	</script>
</head>
<body>
	<div id="diva"> 
		맨위
		<p id="scrollBtn1">[맨아래로 이동]</p>
	</div>
	<div id="divb">
		맨 아래 
		<p id="scrollBtn2">[맨위로 이동]</p>
	</div>
</body>
</html>


dd
해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동

확인:http://azit4u.phps.kr/jquery/scrollTop.html

Comment +0

hover(마우스오버시 이벤트,마우스아웃시 이벤트)

$("#button").hover(
	function() {
		$(this).addClass("hover");
	},
	function() {
		$(this).removeClass("hover");
	}
);


$("#button").hover(function(){
	$("#button").toggleClass("hover");
});


위 두 소스는 같은 결과를 출력

toggleClass() - 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 해당 클래스를 제거 하고 그렇지 않으면
                       해당 클래스를 적용 한다.

toggle(handler0,handler1) - 선택한 엘리먼트에 두개 이벤트 연결 한번 실행 마다 0,1 의 핸들러 함수 실행


$("#button").toggle(
	function(){
		$(this).removeClass("hover2");
		$(this).addClass("hover");
	},
	function(){
		$(this).removeClass("hover");
		$(this).addClass("hover2");
	}
);

Comment +0