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. jsp包含的讲解

    <%@page language="java" import="java.util.*" pageEncoding="UTF-8"%& ...

  2. iOS (catagroy)类别

    1:可以为类添加新的方法,但不能添加实例变量. 2:第一,无法向类中添加新的实例变量.类别没有位置容纳实例变量. 第二,名称冲突,即类别中的方法与现有的方法重名.当发生名称冲突时,类别具有更高的优先级 ...

  3. 新手教程之使用Xib自定义UITableViewCell

    新手教程之使用Xib自定义UITableViewCell 前言 首先:什么是UITableView?看图 其次:什么是cell? 然后:为什么要自定cell,UITableView不是自带的有cell ...

  4. web前端开发（4）

    低权重原则,避免滥用子选择器 CSS选择符是有权重的,当不同选择符的样式设置有冲突时会采用权重高的选择符设置的样式. html标签权重是1,class权重是10,id权重是100 如果css选择符权重 ...

  5. 使用Spring Security实现权限管理

    使用Spring Security实现权限管理 1.技术目标 了解并创建Security框架所需数据表 为项目添加Spring Security框架 掌握Security框架配置 应用Security ...

  6. Java Lock

    JVM中的另一种锁Lock的实现.与synchronized不同的是,Lock完全用Java写成,在java这个层面是无关JVM实现的.在java.util.concurrent.locks包中有很多 ...

  7. Nginx 反向代理，流量转发到固定内网 IP 方法

    主配置文件: user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pi ...

  8. Providers、Controller 、Service、DirectiveFactory

    Providers 是唯一一种你可以传进 .config() 函数的 service.当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider Controller ...

  9. Terminate program hitting CTRl+C within GDB

    Q: My program is determined to stop its execution by hitting CTRL+C in command window. By now, i hav ...

  10. 转: ios app架构设计

    http://keeganlee.me/post/architecture/20160107 看完这一系列文章后就知道怎么回答这类问题了: App架构设计经验谈:接口的设计 App架构设计经验谈:技术 ...