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. C# 之 反射

    一.反射的定义: 审查元数据并收集关於它的类型信息的能力,元数据(编辑后的基本数据单元)就是一大堆表,编译器会创建一个类定义表,一个字段定义表,一个方法定义表等, System.Reflection ...

  2. How to setup ELM327 Bluetooth WiFi for Android software Torque

    1.    Install OBDII 2.    Install Android Software Torque a)    Copy software to phone from CD b)   ...

  3. UIImage的简单用法和实际操作

    png,pdf不需要添加后缀名 jpg添加后缀名 存储 UIImagejpg contentMode属性 这个属性是用来设置图片的显示方式,如居中.居右,是否缩放等,有以下几个常量可供设定: UIVi ...

  4. 重构10-Extract Method（提取方法）

    我们要介绍的重构是提取方法.这个重构极其简单但却大有裨益.首先,将逻辑置于命名良好的方法内有助于提高代码的可读性.当方法的名称可以很好地描述这部分代码的功能时,可以有效地减少其他开发者的研究时间.假设 ...

  5. oracle PL/SQL（procedure language/SQL）程序设计之游标cursors

    游标 Cursors--Conception 每一条被Oracle服务器执行的SQL语句都有一个独立的游标与之相关联:隐式游标 Implicit cursors: 用于所有的DML和PL/SQL的SE ...

  6. Shell学习笔记 - 分支语句

    一.单分支if语句 1. 语法格式 if [ 条件判断式 ]; then 程序 fi 或者 if [ 条件判断式 ] then 程序 fi 注意:中括号和条件判断式之间必须有空格 2. 示例1:判断登 ...

  7. hdu 4739 状压DP

    这里有状态压缩DP的好博文 题目:题目比较神,自己看题目吧 分析: 大概有两种思路: 1.dfs,判断正方形的话可以通过枚举对角线,大概每次减少4个三角形,加上一些小剪枝的话可以过. 2.状压DP,先 ...

  8. 关于类似(i++)+(++i)

    这是一个“然并卵”的问题,因为没有人愿意在代码中给自己找这种麻烦,看到书上讲到这个问题忍不住想顺势总结下,就从表达式说起吧. 在js中,同一般的语言一样,表达式分很多种. 对象和数组的初始化表达式:即 ...

  9. disucz!NT 3.5.0 验证码点击不能变化只是样式变化

    来博客园这么久了,第一次写博客啊!公司有个论坛10年没动了,是discuz!NT 3.5.0版本的,由于验证码不能变化老是被人刷.网上找了很多资料根本没有.可能有同行下次也会遇到这样的问题,我就把我的 ...

  10. ORACLE的分组统计之CUBE(二)

    cube统计包含了rollup的统计结果,而且还有其他组合分组结果(小计),CUBE(n列),那么分组种类有: cube分组就是先进行合计(一个不取),然后小计(到),最后取标准分组. 与rollup ...