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.jb51.net</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{
        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,"欢迎光临脚本之家！","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>