jQuery Simple Marquee, Make text appear scrolling continuously – JS Classes

jQuery Simple Marquee, Make text appear scrolling continuously – JS Classes.

가끔 이렇게 간단하지만 만들려면 귀찮아 지는 것들이 있습니다. 위 JS 스크립트는 한 줄 택스트를 왼쪽으로 흐르게 하는 스크립트입니다. IE에서 간단히 돌려 봤는데 CPU점유율도 거의 없고 쓸만 한것 같네요. 일단 북마크!!!

이런 형식은 증권방송을 보다보면 주가 현황을 자막으로 보여주는 곳에서 사용하죠.

아래 예제 HTML 소스 보시면 사용법도 간단하게 되어 있습니다. 문자열들을 계속 반복시키도록 되어 있습니다.

[예제 html]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Marquee</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.simplemarquee.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#marquee').simplemarquee({
		speed: 		5000,
		direction: 	'rtl', // Options "ltr" or "rtl"
		pause: 		true
	});
});
</script>
<style type="text/css">
	#marquee {
		position:relative;
		overflow:hidden;
		width:100%;
	}
	#marquee .sections {
		position:absolute;
		left:0px;
		top:0px;
		white-space:nowrap;
	}
	#marquee .section {
		padding:0px 10px;
		float:left;
	}
</style>
</head>

<body>
<div id="marquee">
	Enter your scrolling text here!
</div>
</body>
</html>

 

Published by: benant

WEB PROGRAMMER. PHP, nodeJs, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

카테고리 Web댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중