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>
 

jQuery实现公告文字左右滚动的更多相关文章

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  3. jquery文字上下滚动的实现方法

    jquery实现文字上下滚动的方法. 代码: //上下滚动var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...

  4. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

  5. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  6. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  7. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  8. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. Taro -- 文字左右滚动公告效果

    文字左右滚动公告效果 设置公告的左移距离,不断减小,当左移距离大于公告长度(即公告已移出屏幕),重新循环. <View className='scroll-wrap'> <View ...

随机推荐

  1. WPF 之 设置Dialog的父窗体

    1.如果弹出窗体(如ChildWindow),调用Show方法,并且设置了其Owner属性: ClassRootWindow { void Foo() { ChildWindow cw = newCh ...

  2. 通用权限底层研究:Web应用限制IP访问的功能实现

    如果你的web应用受到恶意扫描或攻击,你会怎么处理呢?大多数时候从应用日志里可以看到恶意扫描或攻击,遇到此类情况,如有一个可以进行IP访问控制的功能就好些了. 现将在MVC下实现的一个IP访问限制功能 ...

  3. Scoket

    1.Socket 几个常用的名词 IPC—>Inter Process Communication,进程间通信 socket —> 套接字 TCP—>Transmission Con ...

  4. 程序员怎样在复杂代码中找 bug?(简单)

    分享下我的debug的经验 1. 优先解决那些可重现的,可重现的bug特别好找,反复调试测试就好了,先把好解决的干掉,这样最节约时间. 2. 对于某些bug没有头绪或者现象古怪不知道从哪里下手,找有经 ...

  5. mysql 中浮点型与定点型记录

    为了能够引起大家的重视,在介绍浮点数与定点数以前先让大家看一个例子: mysql> CREATE TABLE test (c1 float(10,2),c2 decimal(10,2)); Qu ...

  6. SpringMVC 的 Controller 返回各种视图的处理方式

    SpringMVC 的 Controller 可以返回各种各样的视图.比如 JSP, JSON, Velocity, FreeMarker, XML, PDF, Excel, 还有Html字符流 等等 ...

  7. ng-model 指令

    ng-model 指令 绑定 HTML 元素 到应用程序数据. ng-model 指令也可以: 为应用程序数据提供类型验证(number.email.required). 为应用程序数据提供状态(in ...

  8. [转]oracle 11g 忘记 默认用户密码

    本文转自:http://blog.csdn.net/huangbiao86/article/details/6595052 首先启动sqlplus 输入用户名:sqlplus / as sysdba ...

  9. Google IP 最新地址

    原文地址:https://ideas.spkcn.com/technology/250.html 2015年 目前最新可以直接访问google的IP91.213.30.152173.194.77.14 ...

  10. CF 208E - Blood Cousins dfs序+倍增

    208E - Blood Cousins 题目:给出一棵树,问与节点v的第k个祖先相同的节点数有多少个. 分析: 寻找节点v的第k个祖先,这不就是qtree2简化版吗,但是怎么统计该祖先拥有多少个深度 ...