首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:34:33
字体:
来源:转载
供稿:网友

代码如下:
<!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.Vevb.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:        每次执行运动的时间间隔(单位:毫秒;数值越小,运动越快)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选