javascript 单行内容连续滚动,允许停留

原创 2016年08月28日 22:28:46

由于项目需要,研究了一下不用jquery,让内容连续滚动的方法,代码在chrome 下运行,如果希望多行滚动,恐怕自己还得进一步研究。

有兴趣的童鞋,可以把 GetTable 代码改改,换成ul和li模式,有时间自己撸撸代码也是有好处的哦。  

这个就是没用到jquery,代码比较简单,复制过去就能直接运行,滚动内容大小其实可以调整的哦。如果需要多行内容滚动,调整两个高度即可,就是那两个20px

写得有不到位的地位,欢迎指正。<!--单行滚动 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
<html>  
<head>  
<title>连续滚动</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
</head>  
<body bgcolor="#FFFFFF">  
    <input type="button" name="btn1" value="开始滚动" onclick="StartScrool()">

   <div id="t2">股市疯了,但疯了意味着机会?</div> 
    
<script type="text/javascript">
    function StartScrool() {
        var arr = ["1京城突降雷阵雨 天空再现双彩虹", "2七成以上企业“低缴”员工社保", "3待遇享受将受影响", "4美国大选决战将至:民调显示希拉里支持率已过50%", "5美媒:旧金山华人虾村见证华人移民百年沧桑"];

        SetTableContent("t2", arr,90);
    };

    function SetTableContent(id,arr,speed) {
        
        var o = document.getElementById(id);

        var m = GetTable(arr);
        
        var htm = '<div style="overflow: hidden; height:20px;"><div>' + m + '</div><div>'+ m +'</div></div>';
        o.innerHTML = htm;

        //setInterval(MoveItem, speed, o.getElementsByTagName("div")[0]);
        MoveItem(o.getElementsByTagName("div")[0], speed,0)
    };

    function GetTable(ArrItem) {
        var t = '<table border="1" align="center" cellpadding="0" cellspacing="0">';
        for (var i = 0; i < ArrItem.length; i++) {
            t += '<tr height="20px"><td>' + ArrItem[i] + '</td></tr>';
        };
        t += '</table>';
        return t;
    };

    function MoveItem(p,speed,i) {
        var o1 = p.getElementsByTagName("div")[0];
        var o2 = p.getElementsByTagName("div")[1]; 
        
        if (o2.offsetTop - p.scrollTop <= 0) {
            p.scrollTop -= o1.offsetHeight;
        } else {
            p.scrollTop++;
        };
        
        var s = speed;
        if (i > p.clientHeight -1) {
            i = 0;
            s = speed + 1000;
        };
        setTimeout(MoveItem, s, p,speed,i+1);
    };
</script>  
</body>  
</html>  


找到一段更好的模式,代码如下

<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>/*<![CDATA[*/
.nl {
    height: 30px;
    margin: 0;
    overflow: hidden;
    padding: 0 0 0 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}
.nl div {
    font-size: 24px;
    height:30px;
    line-height: 30px;
}
/*]]>*/</style>
</head>
<body>

<div id="n1" class="nl">
<div>是不是不一样的啊</div>
<div>这里的文字发的</div>
<div>very ggod</div>
</div>

<script type="text/javascript">/*<![CDATA[*/
  var  vMarq = function (id, tag, heigh, speed, delay) {
        var me = this;
        me.EL = document.getElementById(id);
        me.PA = 0;
        me.TI = null;
        me.LH = heigh;
        me.SP = speed;
        me.DY = delay;
        me.exec = function () {
            if (me.PA) return;
            me.EL.scrollTop += 2;
            if (me.EL.scrollTop % me.LH <= 1) {
                clearInterval(me.TI);
                me.EL.appendChild(me.EL.getElementsByTagName(tag)[0]);
                me.EL.scrollTop = 0;
                setTimeout(me.start, me.DY * 1000);
            }
        };
        me.start = function () {
            if (me.EL.scrollHeight - me.EL.offsetHeight >= me.LH) me.TI = setInterval(me.exec, me.SP);
        };
        me.EL.onmouseover = function () { me.PA = 1 };
        me.EL.onmouseout = function () { me.PA = 0 };
        setTimeout(me.start, me.DY * 1000);
    };

    new vMarq("n1", "div", 30, 80, 1.5);
    /*]]>*/</script>

</body>
</html>

在这里记录一下,这个甚至不算原创了,剽窃一下吧


版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果。 1、单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scro...
  • z69183787
  • z69183787
  • 2014年03月10日 14:34
  • 2694

jquery单行文字向上滚动效果

jquery单行文字向上滚动效果示例 jquery实现的单行文字向上滚动效果,。 代码: 看看间断滚动文字 央视315曝光: 华润深陷“海砂门”回应澄而未清 吉野家被曝餐具不消...
  • vip_linux
  • vip_linux
  • 2014年03月07日 06:04
  • 1111

JS 新闻标题单行向上滚动效果

var marqueeContent=new Array(); //滚动新闻 marqueeContent[0]='14:25 小泉称若自民党在议会选举中失败'; marqueeContent[1...
  • dongsg11200
  • dongsg11200
  • 2013年02月04日 17:46
  • 4943

Gridview单行横向滚动显示

要想实现滚动显示,layout布局里必须要使用HorizontalScrollView,才能实现横向滑动,但HorizontalScrollView标签里要嵌套一个LinearLayout布局acti...
  • gaoxiaomin123456
  • gaoxiaomin123456
  • 2015年11月03日 14:43
  • 1843

JS实现文字的左右滚动

p{position: absolute;left: 125px; top: 100px;} var tag = 0;//标志,判断对象当前位置是在最左还是最右,注意这里必须设置为全局变...
  • u013173279
  • u013173279
  • 2015年07月29日 18:48
  • 4013

Android中单行横向滑动的日历

1.代码实现直接上代码: MainActivity.javapackage com.zhoujian.horizontalcalendar.activity;import android.app.A...
  • u014005316
  • u014005316
  • 2016年12月27日 14:19
  • 1080

web复习(三):js实现公告栏效果,间歇性滚动展示

使用js实现:公告栏间歇性展示效果:思想,使用js操作,ul的scrollTop,并配合setTimeout和setInterval实现循环间歇滚动代码:如下:...
  • do_bset_yourself
  • do_bset_yourself
  • 2016年06月08日 20:25
  • 3414

文字横向滚动效果

/*My Marquee CSS Start*/ .my_marquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3px...
  • avinegar
  • avinegar
  • 2014年03月06日 11:36
  • 2178

使用VerticalRollingTextView实现单行文字垂直滚动

VerticalRollingTextView是一个竖直方向无限循环滚动显示单行文本的控件。非常轻量级,直接继承View实现,使用Paint绘制文本,不依赖任何第三方。 开源项目地址: htt...
  • ruancoder
  • ruancoder
  • 2016年09月09日 17:52
  • 3063

实现当UILable的内容超出其范围后自动滚动效果

有时候我们在使用UILabel时,可能会需要一些效果来提升用户的体验,下面主要介绍 当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果。效果图如下...
  • qq_20913021
  • qq_20913021
  • 2016年05月11日 12:02
  • 1564
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 单行内容连续滚动,允许停留
举报原因:
原因补充:

(最多只允许输入30个字)