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. bootstrap表格多样式及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. Java、Android中Math详解

    java.math.Math类常用的常量和方法: Math.PI 记录的圆周率 Math.E记录e的常量 Math.abs 求绝对值 Math.sin 正弦函数 Math.asin 反正弦函数 Mat ...

  3. unity中UI界面显示FPS

    直接上代码     using UnityEngine; using System.Collections;   public class HUDFPS : MonoBehaviour {       ...

  4. MySQL优化之COUNT(*)效率

    MySQL优化之COUNT(*)效率 刚给一个朋友解决他写的Discuz!插件的问题,说到MySQL的COUNT(*)的效率,发现越说越说不清楚,干脆写下来,分享给大家. COUNT(*)与COUNT ...

  5. Oracle基础 数据库备份和恢复

    一.为什么需要数据备份 造成数据丢失的主要原因: 1.介质故障. 2.用户的错误操作. 3.服务器的彻底崩溃. 4.计算机病毒. 5.不可预料的因素. Oracle中故障类型分为以下4种. 1.语句故 ...

  6. 转: 数字证书原理 https 完整过程解析

    点评: 讲的非常的详细与全面,值得一看. 转: http://www.cnblogs.com/JeffreySun/archive/2010/06/24/1627247.html 文中首先解释了加密解 ...

  7. CS对于dll文件的引用

    1.对于.net或者com型的组件,直接添加引用即可. 2.对于标准的dll文件,利用DLLImport这个函数即可,如果要使用函数的别名,那么应该加入EntryPoint. 示例:一般可以封装成一个 ...

  8. asp.net解决高并发的方案. (转自网络)

    最近几天一直在读代震军的博客,他是Discuz!NT的设计者,读了他的一系列关于Discuz!NT的架构设计文章,大呼过瘾,特别是Discuz!NT在解决高访问高并发时所设计的一系列方案,本人尤其感兴 ...

  9. The future of programming languages

    In this video from JAOO Aarhus 2008 Anders Hejlsberg takes a look at the future of programming langu ...

  10. 用viewpager实现图片轮播

    应用中常常遇到图片轮播的需求,这时候就需要用到viewpager这个组件.viewpager是android support v4 中提供的一个组件.viewpager使用需要以下几步骤: 1.在布局 ...