脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js实现首位相连的文字滚动效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
js实现首位相连的文字滚动效果，最近单位的小同事问了一个问题，就是在页面底部的位置实现字体滚动的效果。若利用<;marquee>进行滚动的话，必须等上一次滚动出屏幕才可以看到下一次进入的文字，这样的效果很不好，滚动区域时常会出现大片空白，用户体验不好。
为了解决这个问题，只能自己想办法了。我的想法是需要有两遍重复的文字，然后判断第一遍文字的位置从而适时引入第二段并将第一段的文字apPEnd到第二段文字的后面，以此类推。
<pid="scrollobj"
style="whITe-space:nowrap; width: 500px; overflow: hidden; z-index: 120; position:absolute;background-color: red;">
<spanstyle="position:relative;">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222</span>
<spanstyle="position:relative;">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span>
</p>VARobj,top;
varzhixing=functionscroll(){
var$=jQuery.noConflict();//避免$冲突
if(!obj)
{
obj=$("#scrollobj");//p
//固定top的位置，每个span都一样；
top=obj.children("span:First").offset().top;
}
//获取第一个span的向左移动量
vara=obj.children("span:first").offset().left;
//第一个span的宽度
varawidth=obj.children("span:first").width();
//获取第二个span的向左偏移量
varb=obj.children("span:last").offset().left;
//第二个span的宽度
bwidth=obj.children("span:last").width();
//每次偏移量
varmovey=35;
//如果内容在范围内则不需要滚动
if(obj.width()>(awidth+bwidth))
{
clearInterval(zhixing);//如果文字长度比p端，则不需要定时滚动
returnfalse;
}
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
varnewnode=(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脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-js实现首位相连的文字滚动效果全部内容，希望文章能够帮你解决javascript代码实例教程-js实现首位相连的文字滚动效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。