상하스크롤_스크립트.zip=============================================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.vticker.min.js"></script>
<script>
$(function() {
$('.example').vTicker();
});
</script>
<script type="text/javascript">
$(function() {
// pause
$('#roll_list').vTicker({margin:10});
$('#pause').click(function() {
$this = $(this);
if($this.text() == 'Pause') {
$('#roll_list').vTicker('pause', true);
$this.text('Unpause');
}
else {
$('#roll_list').vTicker('pause', false);
$this.text('Pause');
}
});
// next
$('#next-animate').click(function() {
$('#roll_list').vTicker('next', {animate:true});
});
$('#next').click(function() {
$('#roll_list').vTicker('next', {animate:false});
});
// prev
$('#prev-animate').click(function() {
$('#roll_list').vTicker('prev', {animate:true});
});
$('#prev').click(function() {
$('#roll_list').vTicker('prev', {animate:false});
});
});
</script>
</head>
<body>
<div class="example" id="roll_list">
<ul>
<li>1111Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
<li>2222Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
<li>3333Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
</ul>
</div>
<button id="next-animate">Next</button>
<button id="prev-animate">Prev</button>
<button id="pause">Pause</button>
<style>
#example {}
</style>
</body>
</html>
'jquery소스' 카테고리의 다른 글
| 돌아가는 아이콘 (0) | 2016.11.21 |
|---|---|
| jquery 를 이용해서 원하는 태그(위치)로 스크롤 이동하기 (0) | 2016.11.09 |
| 퍼블리셔 슬라이드 (0) | 2016.11.01 |
