仿新浪微博滚动，无文字渐显功能

又一款仿新浪微博的文字滚动功能，去掉了滚动开始时候的文字渐显效果，似乎更明淅了，又一种风格的新浪微博大厅文字滚动，要的就复制代码吧。

<!DOCTYPE HTML>

<head>

<title>仿新浪微博滚动</title>

*{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>

<ul>

<li><a href="#">缓如流水却沁人心脾的生活，静若莲花却永不成成长故事长故... -</a></li>

<li><a href="#">在TB买东西好多年了，记得是在“亲”这个称呼刚开始流行时。一天晚上在家里上网，旺旺突然跳了出来窗口来对我说：“亲，我怀孕了。”哥顿时一惊，心说自己没闯什么祸吧？正发愣呢，那人又说：“明天去医院检查。” 心想你丫到底是谁，难道还要我陪你去检查，想讹我不成？我可不怕.</a></li>

<li><a href="#">一位西方记者问周总理：“请问总理先生，现在的中国有没有***？”不少人纳闷：怎么提这种问题？大家都关注周总理怎样回答。周总理肯定地说：“有！” 全场哗然，议论纷纷。周总理看出了大家的疑惑，补充说了一句：“中国的***在我</a></li>

<li><a href="#">1魔法灰姑娘〔超级推荐〕（安妮海瑟薇主演） 2,贱女孩〔超级推荐〕（林赛罗汉主演） 3,灰姑娘的玻璃手机〔超级推荐〕 4,美人鱼〔超级推荐〕（里面音乐也很好听） 5,舞出我人生〔超级推荐〕（励志的！刚出了第二部） </a></li>

<li><a href="#">Tiramisu在意大利原文里，“Tira”是“提、拉”的意思，“Mi”是“我”“Su”是“往上”，合起来就是“拉我起来”的意思；也有另一种解释是“带我走”和“记住我”，带走的不只是美味，</a></li>

</ul>

</div>

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>

转载于:https://blog.51cto.com/chunzhisu/1533600

仿新浪微博滚动，无文字渐显功能相关推荐

仿新浪微博的ListView下拉更新功能
由于最近做的项目中也用到了这个功能,今天刚好实现了下,就趁现在有时间写篇博客分享下.在做的时候也参考了下别人的代码,毕竟站在巨人的肩膀上才会是自己更加强大.哈哈!先看看新浪的下拉更新是什么样的吧! O ...
android 微信朋友圈全功能,Android仿微信朋友圈文字展开全文功能 Android自定义TextView仿微信朋友圈文字展开全文功能...
Android自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
自定义控件仿微信朋友圈文字展开全文功能
自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" enco ...
android 微信朋友圈全功能,Android自定义TextView仿微信朋友圈文字展开全文功能
Android自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
android 微博字体高亮,安卓开发札记——高仿新浪微博文字处理（实现关键字高亮，自定义表情替换并加入点击事件实现）...
安卓开发笔记--高仿新浪微博文字处理(实现关键字高亮,自定义表情替换并加入点击事件实现) 先让大家看下效果图,这个是我自己在闲暇时间仿写的新浪微博客户端: 今天来讲讲如何实现上图的效果,这里需要用到S ...
新浪微博发布文章html,JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本 ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
js仿新浪微博消息发布功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
基于EasyNVR网络摄像机无插件直播流媒体服务器实现文字滤镜处理功能
背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...

仿新浪微博滚动，无文字渐显功能

仿新浪微博滚动，无文字渐显功能相关推荐

最新文章

热门文章