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

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

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

<div id="scrollobj"

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

</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);

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

JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果在谈组件之前来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的貌似说我用招商银行信用卡在今年的6月23日借了招商银行 ...
msclass 文字滚动_【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
HTML实现公告文字滚动效果
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
android 文字滚动组件,Android textview 跑马灯文字滚动效果
设置如下TextView控件文件的XML: android:id="@+id/textview" android:layout_width="match_parent&q ...
各种文字滚动效果代码
几排文字向上滚动 <MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay ...
css数字/文字滚动效果
效果: 原理利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果最 ...

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

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

最新文章

热门文章