<html>类似微博中动态向下滚动效果

2013-09-06 11:46:59 -0400

说明

新浪微博中有个最新更新微博的动态，这些动态循环向下滚动，本例展示的就是文字向下滚动的效果.
了用于播报新闻之类的。。。

代码演示

代码复制

<style>
#ul1{background:lightskyblue; margin:0px; padding:0px; width:100%; height:200px; border:1px solid black; overflow:hidden;border-radius:5px;}
li {border-bottom:1px dashed gray; padding:10px 5px 3px 5px; margin:0px; list-style:none;}
</style>
<script type="text/javascript">
var arr=['我的磨(wodemo.com)，自由的简洁网盘','会武功也不是罪啊', '曾经有一份真诚的爱摆在我的面前，但是我没有珍惜，等到失去的时候才后悔莫及，尘世间最痛苦的事莫过于此。如果上天可以给我个机会再来一次的话，我会对这个女孩说我爱她，如果非要在这份爱加上一个期限，我希望是一万年……', '除暴安良是我们做市民的责任，行善积德是我本人的兴趣，所以扶老太太过马路我每个星期都做一次，如果是碰到国定假日的话，我还做两三次','哈哈哈哈哈哈哈',' 你以为躲起来就找不到你了吗？没有用的！象你这样出色的男人，无论在什么地方，都像漆黑中的萤火虫一样，那样的鲜明，那样的出众。你那忧郁的眼神，稀嘘的胡喳子，神乎其神的刀法，和那杯Dry Martine，都深深地迷住了我。不过，虽然这是这样的出色，但是行有行规，无论怎样你要付清昨晚的过夜费呀，叫女人不用给钱吗？ '];
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>
<ul id="ul1"></ul>

«Newer Older»

Back to home

Subscribe | Register | Login | N