테스트 롤링 여러줄 오버
본문
<div class="content">
<ul class="aa">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">4444</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
<li><a href="#">333</a></li>
</ul>
</div>
--------------------
css
.conttent {
height: 200px; overflow: hidden;padding:0px 10px;
}
.aa{margin:0px; padding:0px;}
.aa li {
padding: 0px; height: 20px; line-height: 20px; overflow: hidden; font-family: simsun; vertical-align: middle;
}
---------------
제이쿼리 (기본쿼리 1.8.1)
<script>
$(function(){
var timer = setInterval(rolling,3000);
$(".aa").mouseover(function() {
clearInterval(timer);
}).mouseout(function() {
timer = setInterval(rolling,3000);
});
});
function rolling(){
$(".aa").animate({
marginTop:parseInt($(".aa").css("margin-top"))-20+"px"
},"slow","swing",function(){
$(".aa").css("margin-top","-20px");
$(".aa li:first").appendTo(".aa");
});
}
</script>
이형식인데 한줄씩 롤오버는 되는데 margin-top:20으로 한줄씩 오버는 되요 그런데 -60으로 변경하니 제이쿼리가 안되더라구요;;;;방법이 뭐일까요?
제이쿼리에 문외해서.... ..ㅠㅠ 왕 초보임돠.ㅠㅠㅠ
한줄오버가 아닌 3줄씩 오버하는형식으로 바꾸고 싶어요.ㅠㅠ
답변 2
<style>
.content { width:300px;
height:200px; overflow:hidden;padding:0px 10px; background:#C0EFA9; border:1px solid #65ED70;
}
.aa{margin:0px; padding:0px;}
.aa li {
padding: 0px; height: 20px; line-height: 20px; overflow: hidden; font-family: simsun; vertical-align: middle;
}
</style>
<div class="content">
<ul class="aa">
<li><a href="#">테스트1</a></li>
<li><a href="#">테스트2</a></li>
<li><a href="#">테스트3</a></li>
<li><a href="#">테스트4</a></li>
<li><a href="#">테스트5</a></li>
<li><a href="#">테스트6</a></li>
<li><a href="#">테스트7</a></li>
<li><a href="#">테스트8</a></li>
<li><a href="#">테스트9</a></li>
<li><a href="#">테스트10</a></li>
<li><a href="#">테스트11</a></li>
<li><a href="#">테스트12</a></li>
<li><a href="#">테스트13</a></li>
<li><a href="#">테스트14</a></li>
<li><a href="#">테스트15</a></li>
<li><a href="#">테스트16</a></li>
<li><a href="#">테스트17</a></li>
<li><a href="#">테스트18</a></li>
</ul>
</div>
<script>
$(function(){
var timer = setInterval(rolling,3000);
$(".aa").mouseover(function() {
clearInterval(timer);
}).mouseout(function() {
timer = setInterval(rolling,3000);
});
});
function rolling(){
var _xx=false;
var item_height=$(".aa li").height();
$(".aa").animate({
marginTop:parseInt($(".aa").css("margin-top"))-(item_height*3)+"px"
},"slow","swing",function(){
$(".aa").css("margin-top","-"+(item_height)+"px");
$(".aa li:first").appendTo(".aa");
$(".aa li:first").appendTo(".aa");
$(".aa li:first").appendTo(".aa");
});
}
</script>
이렇게 작성 해봤습니다. css에서 .conttent 가 잘못되어 있어서 바꾸고요
초기에 하나 빠지면서 느낌이 이상한대 한번 연구해보세요 ㅎㅎ.... 처음에만 좀 느낌이 이상한대..
요청하시면 보완 해드릴게요. 그리고 $(".aa li:first").appendTo(".aa"); 3개 하신다고 하시길래 ...
3번 적었구요. 하나식 빠지니깐 다음 노드가 첫번째 되는거라 3번 적은겁니다 오타가아니에요 ㅎㅎ
와우.... 당신이 진정한 ㅋㅋ 제이쿼리를 해본적이 없는데 구현하고 있는중이라 얘먹는중이거든요^^:: 감사합니다. 처음에 빠지는 이유 찾고는잇는데.... ㅠ 잘 안되네요;;;
