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 之 布局（二）

    一.Canvas  Canvas是最基本的面板,只是一个存储控件的容器,它不会自动调整内部元素的排列及大小,它仅支持用显式坐标定位控件,它也允许指定相对任何角的坐标,而不仅仅是左上角.可以使用Left ...

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

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

  3. c++的输入流基础知识

    cin是istream类的对象,它从标准输入设备获取数据,程序中的变量通过流提取符“>>”从流中提取数据.从流中提取数据时通常跳过输入流中的空白符   只有在输入完数据并按回车后,该行数据 ...

  4. IOS开发篇UI之重用scrollView

    1.scrollView的介绍 scrollView是UI中的基础视图,他有着至关重要的作用,也是我们在UI中常用的控件.他的代理有很多我们需要用,这里我们就不再一一介绍了. 2.简单scrollVi ...

  5. a 中调用js的几种方法

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  6. PHP 中mysql如何实现事务提交？

    事务就是指对数据库的多次修改,要么全部成功,要么全部失败,不能出现部分修改成功,部分修改失败的情况. PHP下操作mysql数据库要实现事务提交,需注意以下方面: 1, 数据库表存储引擎类型设置为in ...

  7. Java IO 技术之基本流类

    流式IO 流(Stream)是字节的源或目的.         两种基本的流是:输入流(Input Stream)和输出流(Output Stream).可从中读出一系列字节的对象称为输入流.而能向其 ...

  8. 搭建第一个web项目：jasperReports+ireport制作pdf报表

    一:jasperReports介绍: 在web应用中,必须面临大量的报表问题,即将数据库中的数据形成报表并进行打印.传统开发只能使用html页面设计报表,效率低且不支持别的格式.所以jasperRep ...

  9. node.js学习的资源整理

    node中文社区 Node.js专业中文社区:https://cnodejs.org/ node文档 node.js 中文api :http://nodeapi.ucdok.com/ node.js入 ...

  10. PHP与javascript实现变量交互

    <?php /** * 本例是PHP和javascript交互的例子,php中的值赋给js变量中,前提是这个php变量必须有值才行,就算是假分支中. * 比如php中的$flags在本例中为tr ...