jQuery公告文字左右滚动的实现代码

发布时间:2020-02-24编辑:脚本学堂
本文介绍下,Jquery实现的文字左右滚动的一例代码,学习下jquery操作文字效果的方法,有需要的朋友参考下吧。

本节内容:
jquery文字左右滚动的实例代码。

例子:
 

复制代码 代码示例:
<!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>jQuery公告文字左右滚动效果-www.jb200.com</title>
<style type="text/css">
#scrollText {
    width: 400px;
    margin-right: auto;
    margin-left: auto;
}
</style>
</head>
<script type="text/javascript" src="/source/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var ScrollTime;
function ScrollAutoPlay(contID,scrolldir,showwidth,textwidth,steper){
    var PosInit,currPos;
    with($('#'+contID)){
currPos = parseInt(css('margin-left'));
if(scrolldir=='left'){
    if(currPos<0 && Math.abs(currPos)>textwidth){
css('margin-left',showwidth);
    }
    else{
css('margin-left',currPos-steper);
    }
}
else{
    if(currPos>showwidth){
css('margin-left',(0-textwidth));
    }
    else{
css('margin-left',currPos-steper);
    }
}
    }
}
//---左右滚动效果----
/*
AppendToObj:显示位置(目标对象)
ShowHeight:显示高度
ShowWidth:显示宽度
ShowText:显示信息
ScrollDirection:    滚动方向(值:left、right)
Steper:每次移动的间距(单位:px;数值越小,滚动越流畅,建议设置为1px)
Interval:每次执行运动的时间间隔(单位:毫秒;数值越小,运动越快)
*/
function ScrollText(AppendToObj,ShowHeight,ShowWidth,ShowText,ScrollDirection,Steper,Interval){
    var TextWidth,PosInit,PosSteper;
    with(AppendToObj){
html('');
css('overflow','hidden');
css('height',ShowHeight+'px');
css('line-height',ShowHeight+'px');
css('width',ShowWidth);
    }
    if (ScrollDirection=='left'){
PosInit = ShowWidth;
PosSteper = Steper;
    }
    else{ www.jb200.com
PosSteper = 0 - Steper;
    }
    if(Steper<1 || Steper>ShowWidth){Steper = 1}//每次移动间距超出限制(单位:px)
    if(Interval<1){Interval = 10}//每次移动的时间间隔(单位:毫秒)
    var Container = $('<div></div>');
    var ContainerID = 'ContainerTemp';
    var i = 0;
    while($('#'+ContainerID).length>0){
ContainerID = ContainerID + '_' + i;
i++;
    }
    with(Container){
      attr('id',ContainerID);
      css('float','left');
      css('cursor','default');
      appendTo(AppendToObj);
      html(ShowText);
      TextWidth = width();
      if(isNaN(PosInit)){PosInit = 0 - TextWidth;}
      css('margin-left',PosInit);
      mouseover(function(){
  clearInterval(ScrollTime);
      });
      mouseout(function(){
  ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
      });
    }
    ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
}
</script>
<script type="text/javascript">
$(document).ready(function(e) {
    ScrollText($('#scrollText'),23,400,'欢迎光临脚本学堂,http://www.jb200.com!','left',1,20);//滚动字幕
});
</script>
<body>
<div id="scrollText"></div>
<script type="text/javascript">
if(document.getElementById('GoogleAD')!=null){
    document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
}
</script>
</body>
</html>