jQuery实现公告文字左右滚动

作者：空白诗007 | 2024-07-17 10:24:45

踩

jq文字向左滚动

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.jbxue.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{
        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>

posted on 2013-09-04 20:13 snowfly123 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/linuxnotes/p/3301910.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/839403