按设定的时间间隔滚动内容？

有两行，如下所示：按设定的时间间隔滚动内容？

<div id="test"> test one jquery is a good library.<br/> 
test two php is a good language.</div>

现在我想滚动逐一（顶线隐藏底线show.vice反之亦然）和行显示和自动隐藏该时间间隔是500毫秒。滚动方向从下到上。

我不知道该怎么做。

以下是我的代码。但我完全被困住了。我不知道如何编写这个函数。

$(function(){ 
      $('#test').slideUp('500' function(){ 
     //how to write 
     }); 
     })

来源

2012-05-16 run

什么是一个接一个地滚动它们？这是你的意思吗？ http://www.quackit.com/html/codes/html_marquee_code.cfm – xiaoyi

http://stackoverflow.com/questions/2291645/jquery-div-autoscroll这是类似的文章不使用滑动，不会达到目的 – Devjosh

@小逸顶线隐藏底线秀，反之亦然 – run

进行切换，你需要换div中的文本内容，你需要一些方法可以通过setInterval的方法由JavaScript实现定义的时间间隔后重复这一点。 Demo on JsFiddle

div1= document.getElementById('test');  

interval = setInterval(function myfun(){ 
    arr = div1.innerHTML.split(/<br[^>]*>/gi); 
    div1.innerHTML = arr[1] + '<br/>' + arr[0]; 
    //alert(div1.innerHTML); 
}, 1000);

来源

2012-05-16 09:46:12 Adil

对不起，效果显示JsFiddle不是我想要的。我想要内容逐一滚动（顶部行隐藏底线show.they重复滚动） – run

我修改了我的答案和演示，我希望这是你所需要的。 – Adil

你的代码非常漂亮，我添加了一些使得我想要的效果的CSS。但我不知道你的代码含义是什么。 – run

这可以通过使用一些CSS3动画和的JS几行代码被归档。演示http://jsfiddle.net/Vm2wz/2/

<!doctype html> 
<html> 
<head> 
<style type="text/css"> 
/* Effect Rules */ 
.animated { /* you can add moz support as well */ 
    -webkit-transition-properties: top opacity; 
    -webkit-transition-duration: 0.25s; 
} 
.hide { 
    opacity: 0; 
} 
.top { 
    top: -30px; 
} 
.bottom { 
    top: 30px; 
} 

/* Canvas Setup Rules */ 
ul, li { 
    padding: 0; 
    margin: 0; 
    height: 30px; 
    list-style: none; 
} 

ul { 
    position: relative; 
} 

li { 
    top: 0; 
    position: absolute; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li>CSS3 is so amazing.</li> 
    <li>DOM is best toy.</li> 
    <li>jQuery sucks every way.</li> 
</ul> 
<script type="text/javascript"> 
var ul = document.querySelector('ul'); 
var items = ul.querySelectorAll('li'); 

for (var i = 0, item; item = items[i]; i++) 
    items[i].className = 'bottom hide'; 

var curid = 0, nextid = 1, state = 0; 
setInterval(function() { 
    switch (state) { 
    case 0: // hide items[curid], and show items[nextid] in 250ms 
     items[curid].className = 'animated top hide'; 
     items[nextid].className = 'animated'; 
     state = 1; 
    break; 
    case 1: // move items[curid] to bottom, curid = nextid, nextid++; 
     items[curid].className = 'bottom hide'; 
     curid = nextid; 
     if (++nextid >= items.length) nextid = 0; 
     state = 0; 
    break; 
    } // you may also add a state 2 which do nothing but wait 250ms. then the state goes from 0 -> 2 -> 1 -> 0. 
}, 250); 

</script> 
</body> 
</html>

来源

2012-05-16 11:47:58 xiaoyi

谢谢，我想要在IE7上运行的代码，我应该怎么做？想和你结交一个朋友。我的QQ是285967378 :( – run

按设定的时间间隔滚动内容？

回答

相关问题