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. Ext.Net TextField Enter事件

    (1)DirectEvents触发后台 <ext:TextField ID="txt_Upc" runat="server" Width="15 ...

  2. 网络流最经典的入门题 各种网络流算法都能AC。 poj 1273 Drainage Ditches

    Drainage Ditches 题目抽象:给你m条边u,v,c.   n个定点,源点1,汇点n.求最大流.  最好的入门题,各种算法都可以拿来练习 (1):  一般增广路算法  ford() #in ...

  3. C#高级特性

    1.接口 接口与抽象基类.抽象类与接口的不同是,抽象类不仅可以定义多态接口还可以定义一些其他的成员以及构造函数.而接口只能包含抽象成员. 抽象父类创建多态接口,只有派生类才可以.而往往很多情况下非派生 ...

  4. Oracle 基础 游标

    一:游标的基本原理 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集. 为了处理SQL语句,Oracle将在内存中分配一个区域, ...

  5. Oracle 11g R2 for Win7旗舰版（64位）的安装步骤

    1.下载Oracle 11g R2 for Windows的版本 下载地址:http://www.oracle.com/technetwork/database/enterprise-edition/ ...

  6. 深入理解HTTPS通讯原理

    一.HTTPS简介 HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer),简单来讲就是加了安全的HTTP,即HTTP+SSL:我们知 ...

  7. Lnmp下安装memcached

            Lnmp下安装memcached 1.先安装 libevent,再安装 Memcached主程序 # tar xf libevent-2.0.21-stable.tar.gz # cd ...

  8. mysql开启general log的方法

    因为为了性能考虑,一般general log不会开启.slow log可以定位一些有性能问题的sql,而general log会记录所有的SQL. mysql5.0版本,如果要开启slow log.g ...

  9. selenium修改控件属性

    起因:在进行退出的时候,控件属性显示为不可显示,于是在界面上是不可以点击的,如果想点击这个按钮,只能通过修改控件属性,进行点击 上图看控件,正常来说,点击坐边的用户名,下拉会出现一个logout,退出 ...

  10. sublime text 3 扩展插件SideBarEnhancements用法教程

    SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的快捷键. 第一步:安装此插件,搜索相关教程,本博客有 ...