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

前端技术 2023/09/02 JavaScript

复制代码 代码如下:

<!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.phpstudy.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,\'欢迎光临phpstudy！\',\'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>

       

本文地址：https://www.stayed.cn/item/3267

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案