新浪微博文字滚动效果

最新推荐文章于 2025-09-10 10:12:04 发布

转载最新推荐文章于 2025-09-10 10:12:04 发布 · 593 阅读

文章标签：

#新浪微博 #function #xhtml #html #border #null

jquery代码分享专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>新浪微博文字滚动效果</title>
    <style>
    #ul1 {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}
    li {border-bottom:1px dashed #CCC; padding:15px 10px 3px 10px; margin:0px; list-style:none;}
    </style>
    <script type="text/javascript">
    var arr=['洗脸也能抽筋？？', '好冷啊', '一如既往地喜欢特务男，哈哈，有脑有身手', '我靠近你，不是因为你什么都好，不是因为你能给我一个安心而不错的未来，不是因为你是我的老公，不是因为我觉得我们肯定这一辈子会这样好好走下去，不是因为再找一段感情代价太大，而是因为，我爱你，我觉得看到你，就会心动。', '我承认我是个没有鼓励就没有动力的人，缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间，全是梦想，家庭和朋友。'];
    var t=setInterval(function(){
    var sTxt=arr.shift();
    createDom(sTxt);
    arr.push(sTxt);
    },2000)
    var bPause=false;
    function startMove(obj,attr,iTarget,fnMoveEnd)
    {
    if(obj.timer)
    {
    clearInterval(obj.timer);
    }
    obj.timer=setInterval(function(){
    if(bPause)
    {
    return;
    }
    doMove(obj,attr,iTarget,fnMoveEnd);
    },30)
    };
    function getAttr(obj,attr)
    {
    if(obj.currentStyle)
    {
    return obj.currentStyle[attr];
    }
    else
    {
    return document.defaultView.getComputedStyle(obj,false)[attr];
    }
    }
    function doMove(obj,attr,iTarget,fnMoveEnd)
    {
    var iSpeed=0;
    var weizhi=0;
    if(attr=="opacity")
    {
    weizhi=parseFloat(getAttr(obj,"opacity"));
    }
    else
    {
    weizhi=parseFloat(getAttr(obj,attr))
    }
    if(Math.abs(iTarget-weizhi)<1/100)
    {
    clearInterval(obj.timer);
    obj.timer=null;
    if(fnMoveEnd)
    {
    fnMoveEnd();
    }
    }
    else
    {
    iSpeed=(iTarget-weizhi)/8;
    if(attr=="opacity")
    {
    obj.style.filter="alpha(opacity:"+(weizhi+iSpeed)*100+")";
    obj.style.opacity=weizhi+iSpeed;
    }
    else
    {
    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
    obj.style[attr]=weizhi+iSpeed+"px";
    }
    }
    };
    function leaveMessage()
    {
    var oText=document.getElementById("txt1");
    createDom(oText.value);
    oText.value="";
    };
    function createDom(sTxt)
    {
    var oUl=document.getElementById("ul1");
    var aLi=oUl.getElementsByTagName("li");
    var oLi=document.createElement("li");
    var iHeight=0;
    oLi.innerHTML=sTxt;
    oLi.style.filter="alpha(opacity:0)";
    oLi.style.opacity=0;
    if(aLi.length)
    {
    oUl.insertBefore(oLi,aLi[0])
    }
    else
    {
    oUl.appendChild(oLi)
    }
    //开始运动
    iHeight=oLi.offsetHeight;
    oLi.style.height="0px";
    oLi.style.overflow='hidden';
    startMove(oLi,"height",iHeight,function(){
    startMove(oLi,"opacity",1)
    })
    oUl.onmouseover=function()
    {
    bPause=true;
    };
    oUl.onmouseout=function()
    {
    bPause=false;
    }
    };
    </script>
    </head>
    <body>
    <ul id="ul1"></ul>
    </body>
    </html>