js实现首尾相连的文字滚动效果

        最近单位的小同事问了一个问题，就是在页面底部的位置实现字体滚动的效果。若利用<marquee>进行滚动的话，必须等上一次滚动出屏幕才可以看到下一次进入的文字，这样的效果很不好，滚动区域时常会出现大片空白，用户体验不好。

        为了解决这个问题，只能自己想办法了。我的想法是需要有两遍重复的文字，然后判断第一遍文字的位置从而适时引入第二段并将第一段的文字append到第二段文字的后面，以此类推。

<div id="scrollobj"

    style="white-space:nowrap; width: 500px; overflow: hidden;  z-index: 120; position:absolute;background-color: red;">

<span style="position:relative;">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222</span>

<span style="position:relative;">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span>

</div>

var obj,top;

var zhixing=function scroll(){

   

    var $=jQuery.noConflict();//避免$冲突

    if(!obj)

   {

              obj=$("#scrollobj"); //div

               //固定top的位置，每个span都一样；

              top=obj.children("span:first").offset().top;

 

   }

    //获取第一个span的向左移动量

    var a=obj.children("span:first").offset().left;

    //第一个span的宽度

    var awidth=obj.children("span:first").width();

    //获取第二个span的向左偏移量

    var b=obj.children("span:last").offset().left;

    //第二个span的宽度

   bwidth=obj.children("span:last").width();

    //每次偏移量

    var movey=35;

 

 

    //如果内容在范围内则不需要滚动

    if(obj.width()>(awidth+bwidth))

   {

   clearInterval(zhixing);//如果文字长度比div端，则不需要定时滚动

    return false;

     

     }

   

    try{

       //每次移动两个span，向左移动movey的值；

      obj.children("span:first").offset({top:top,left:(a-movey)});

      obj.children("span:last").offset({top:top,left:(b-movey)});

      

       //如果第一个span超出scrollobj的左边线

       if((Math.abs(a))>awidth)

      {

               //复制第一个newnode

                var newnode=(obj.children("span:first")).clone(true);

                //移除第一个span

               obj.children("span:first").remove();

                //将剩下的span（即第二个）看成第一个，并重置其偏移位置为0

               obj.children("span:first").offset({top:top,left:0});

                //设置newnode位置在第一个span之后

               newnode.offset({top:top,left:(awidth+80)});

               //追加newnode

               newnode.appendTo(obj);

 

                

       }

   }catch(err)

   {

      console.log(err);

   }

 

};

 

clearInterval(zhixing);

setInterval(zhixing,500);