仿新浪微博滚动，无文字渐显功能
又一款仿新浪微博的文字滾動(dòng)功能，去掉了滾動(dòng)開始時(shí)候的文字漸顯效果，似乎更明淅了，又一種風(fēng)格的新浪微博大廳文字滾動(dòng)，要的就復(fù)制代碼吧。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />?
<title>仿新浪微博滾動(dòng)</title>
<style type="text/css">
*{padding:0;margin:0;list-style:none;}
body{margin:0 auto;}
a{text-decoration:none;color:#005EAC;}
#outCont{position:relative;width:500px;height:300px;border:1px solid #333;overflow:hidden;margin:0 auto;}
#outCont ul{position:absolute;padding:20px;}
#outCont li{border-bottom:1px solid #E3EEF8;text-indent:30px;padding:10px 0;}
</style>
</head>
<body>
<div id="outCont">
<ul>
<li><a href="#">緩如流水卻沁人心脾的生活，靜若蓮花卻永不成成長故事長故... -</a></li>
<li><a href="#">在TB買東西好多年了，記得是在“親”這個(gè)稱呼剛開始流行時(shí)。一天晚上在家里上網(wǎng)，旺旺突然跳了出來窗口來對我說：“親，我懷孕了?！备珙D時(shí)一驚，心說自己沒闖什么禍吧？ 正發(fā)愣呢，那人又說：“明天去醫(yī)院檢查。” 心想你丫到底是誰，難道還要我陪你去檢查，想訛我不成？我可不怕.</a></li>
<li><a href="#">一位西方記者問周總理：“請問總理先生，現(xiàn)在的中國有沒有***？”不少人納悶：怎么提這種問題？大家都關(guān)注周總理怎樣回答。周總理肯定地說：“有！” 全場嘩然，議論紛紛。周總理看出了大家的疑惑，補(bǔ)充說了一句：“中國的***在我</a></li>
<li><a href="#">1魔法灰姑娘〔超級推薦〕 （安妮海瑟薇主演） 2,賤女孩〔超級推薦〕（林賽羅漢主演） 3,灰姑娘的玻璃手機(jī)〔超級推薦〕 4,美人魚〔超級推薦〕 （里面音樂也很好聽） 5,舞出我人生〔超級推薦〕 （勵(lì)志的！剛出了第二部） </a></li>
<li><a href="#">Tiramisu在意大利原文里，“Tira”是“提、拉”的意思，“Mi”是“我”“Su”是“往上”，合起來就是“拉我起來”的意思；也有另一種解釋是“帶我走”和“記住我”，帶走的不只是美味，</a></li>
</ul>
</div>
<script type="text/javascript">
function slideDown(ContId,interTime,speed)
{
var d = document;
var contOut = d.getElementById(ContId);
var ul = contOut.getElementsByTagName("ul")[0];
var intval,timeOut,sInterval;
function run(){
intval = setInterval(function(){
var li = contOut.getElementsByTagName("li");
var liNum = li.length;
var tempLi = li[liNum-1].cloneNode(true);
var tHeight = li[liNum-1].offsetHeight;
ul.insertBefore(tempLi,li[0]);
ul.style.top= -tHeight+"px";
var runDown = function(){
sInterval = setInterval(function(){
var uTop = parseInt(ul.offsetTop);
if(tHeight>0){
ul.style.top = (-(tHeight-1))+"px";
//ul.style.top = -(tHeight - Math.ceil(tHeight/10))+"px";
}else{
ul.style.top = 0+"px";
clearInterval(sInterval);
}
tHeight--;
},speed);
ul.removeChild(li[liNum]);
}
runDown();
},interTime);
}
run();
function stop(){
clearInterval(intval);
}
contOut. = function(){
stop();
}
contOut. = function(){
run();
}
}
slideDown("outCont",5500,20);
</script>
</body>
</html>
轉(zhuǎn)載于:https://blog.51cto.com/chunzhisu/1533600
總結(jié)
以上是生活随笔為你收集整理的仿新浪微博滚动，无文字渐显功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Netbackup 7.6新增功能和优势
- 下一篇： 制作openstack-centos镜像