仿微博的随屏幕滚动内容显示 .net

 仿微博的随屏幕滚动内容显示 .net
 
 有过的吗?高手指教！
有过的吗?高手指教！ 思路或代码请贴一下!

解决方案 »

  1.   

    本帖最后由 net_lover 于 2012-04-13 15:22:49 编辑
      

  2.   


    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8" /> 
    <title>仿新浪微博滚动</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买东西好多年了，记得是在“亲”这个称呼刚开始流行时。一天晚上在家里上网，旺旺突然跳了出来窗口来对我说：“亲，我怀孕了。”哥顿时一惊，心说自己没闯什么祸吧？ 正发愣呢，那人又说：“明天去医院检查。” 心想你丫到底是谁，难道还要我陪你去检查，想讹我不成？我可不怕.</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>
    <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.onmouseover = function(){
    stop();
    }
    contOut.onmouseout = function(){
    run();
    }
    }
    slideDown("outCont",5500,20);
    </script>
    </body>
    </html>
      

  3.   

    页面延迟加载数据,原理利用scroll+ajax:
    http://justcoding.iteye.com/blog/899250