InnerFade 는 jQuery 를 이용하여 텍스트, 이미지 등에 대하여 slide , fade 효과를 줄수 있습니다.
한가지 더 좋은점은 스크립트가 실행되면서 스타일도 줄수 있다는 점 입니다.
아래의 본문에는 첨부한 파일을 이용하여 간단한 샘플코드를 추가해 놓았습니다.
아래 소스 참고하셔서 조금만 수정하시면 쉽게 응용이 가능하겠네요 ^^
( 여러가지 옵션을 줄수 있습니다. 값에 대한 설명을 해 놓았으니 참고하셔서 조작하시면 됩니다. )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<!-- saved from url=(0013)about:internet -->
<head>
<title>
InnerFade with jquery
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'fade', //animationtype: 'fade', animationtype: 'slide',
speed: 2000, //speed:'slow' , speed: 'normal' , speed: 'fast' milliseconds
timeout: 2000, //milliseconds
type: 'sequence', //type: 'random', type: 'random_start',
containerheight: '1em' //containerheight:'auto' , containerheight: '1em' css-height-value
//runningclass: 'innerfade' //CSS-Class which the container get's applied ( Default : 'innerfade')
});
});
</script>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="all" />
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>
</head>
<body>
<div class="limiter">
<ul id="news">
<li>
<a href="#n1">1 한글도 될까요?</a>
</li>
<li>
<a href="#n2">2 오 잘된다^^</a>
</li>
<li>
<a href="#n3">3 멋진데?</a>
</li>
<li>
<a href="#n4">4 웁스</a>
</li>
</ul>
</div>
</body>
</html>
|
