代码：

<!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=utf-8" />

<title>向上无缝滚动</title>

<style>

body {

    font-size: 12px;

    line-height: 24px;

    text-algin: center;        /* 页面内容居中 */

}

* {

    margin: 0px;

    padding: 0px;            /*  去掉所有标签的marign和padding的值  */

}

ul {

    list-style: none;           /*  去掉ul标签默认的点样式  */

}

a img {

    border: none;        /*  超链接下，图片的边框  */

}

a {

    color: #;

    text-decoration: none;     /* 超链接样式 */

}

a:hover {

    color: #ff0000;

}

#mooc {

    width: 399px;

    border: 5px solid #ababab;

    -moz-border-radius: 15px;      /* Gecko browsers */

    -webkit-border-radius: 15px;   /* Webkit browsers */

    border-radius: 15px;

    box-shadow: 2px 2px 10px #ababab;

    margin: 50px auto ;

    text-align: left;               /* 让新闻内容靠左 */

}

/*  头部样式 */

#moocTitle {

    height: 62px;

    overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */

    font-size: 26px;

    line-height: 62px;

    padding-left: 30px;

    background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(, #f05e6f), color-stop(, #c9394a)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType=''); /* IE*/

    border: 1px solid ##f05e6f;

    -moz-border-radius: 8px 8px  ;      /* Gecko browsers */

    -webkit-border-radius: 8px 8px  ;   /* Webkit browsers */

    border-radius: 8px 8px  ;

    color: #fff;

    position: relative;

}

#moocTitle a {

    position: absolute;

    right: 10px;

    bottom: 10px;

    display: inline;

    color: #fff;

    font-size: 12px;

    line-height: 24px;

}

/*  底部样式 */

#moocBot {

    width: 399px;

    height: 10px;

    overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */

}

/*  中间样式 */

#moocBox {

    height: 24px;

    width: 335px;

    margin-left: 25px;

    margin-top: 10px;

    overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */

}

#mooc ul li {

    height: 24px;

}

#mooc ul li a {

    width: 180px;

    float: left;

    display: block;

    overflow: hidden;

    text-indent: 15px;

    height: 24px;

}

#mooc ul li span {

    float: right;

    color: #;

}

</style>

</head>

<body>

<!--  慕课网课程公告开始 -->

<div  id="mooc">

<!--  头部 -->

<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>

<!--  头部结束 -->

<!--  中间 -->

<div  id="moocBox">

    <ul id="con1">

        <li><a href="#">.学会html5 绝对的屌丝逆袭（案例）</a><span>--</span></li>

        <li><a href="#">.tab页面切换效果（案例）</a><span>--</span></li>

        <li><a href="#">.圆角水晶按钮制作（案例）</a><span>--</span></li>

        <li><a href="#">.HTML+CSS基础课程(系列)</a><span>--</span></li>

        <li><a href="#">.分页页码制作（案例）</a><span>--</span></li>

        <li><a href="#">.导航条菜单的制作（案例）</a><span>--</span></li>

        <li><a href="#">.信息列表制作(案例)</a><span>--</span></li>

        <li><a href="#">.下拉菜单制作(案例)</a><span>--</span></li>

        <li><a href="#">.如何实现“新手引导”效果</a><span>--</span></li>

    </ul>

    <ul id="con2">

    </ul>

</div>

<!--  中间结束 -->

</div>

<!--  慕课网课程公告结束 --> 

<script type="text/javascript">

 var area = document.getElementById('moocBox');

 var iliHeight = ;//单行滚动的高度

 var speed = ;//滚动的速度

 var time;

 var delay= ;

 area.scrollTop=;

 area.innerHTML+=area.innerHTML;//克隆一份一样的内容

 function startScroll(){

     time=setInterval("scrollUp()",speed);

     area.scrollTop++;

     }

 function scrollUp(){

     if(area.scrollTop % iliHeight==){

          clearInterval(time);

         setTimeout(startScroll,delay);

         }else{

             area.scrollTop++;

             if(area.scrollTop >= area.scrollHeight/){

                 area.scrollTop =;

                 }

            }

 }

     setTimeout(startScroll,);

 </script>

</body>

</html>

修改

#moocBox {
height: 24px;
width: 335px;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
即可

效果：

js 单行间隙滚动的更多相关文章

  1. js 实现 间隙滚动效果

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  2. js无间隙滚动

    代码一: ; //设置文字滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function Marquee(){ ) //当滚动至dome1与 ...

  3. js无间隙向上滚动

    一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...

  4. 单行文字滚动就用myslider

    单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  7. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  8. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. go语言从例子开始之Example12.func函数

    函数 是 Go 的中心.我们将通过一些不同的例子来进行学习. Example: package main import "fmt" //定义一个函数使用关键字func //函数名名 ...

  2. mysql limit 数据重复及遗漏

    某天写了一段CRUD,提测给QA,后来想起来忘记按规则排序了,然后修改了代码提交,这个时候QA扔给我一条狗,不,是一个BUG. 内心一片忧伤,CRUD也有BUG啊,怎么办怎么办,赶紧看看去. BUG描 ...

  3. 第12篇Kubernetes 监控

        一.Weave Scope: Weave Scope 容器地图   创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其 ...

  4. java改动后运行无变化

    缓存没有及时清理,重新清理打包后运行正常

  5. windows读密码的几种姿势

    1.mimikatz mimikatz.exe "sekurlsa::debug" "sekurlsa::logonPasswords full" >&g ...

  6. bootsrap 按钮样式

    <!-- Standard button --> <button type="button" class="btn btn-default"& ...

  7. noi2019感想

    不知道怎么想的,我现在已经没有心情写一篇完整的游记了. 发挥的是真的太差,Day1该切的T2没有切掉,想的时候漏了一个性质,便由100->45. Day1的时间全花在了T3上,结果想歪了,最后只 ...

  8. php time()函数 语法

    php time()函数 语法 time()函数怎么用? php time()函数用来返回当前时间的unix时间戳.语法是time(),返回自从 Unix 纪元(格林威治时间 1970 年 1 月 1 ...

  9. paper 147：Deep Learning -- Face Data Augmentation（一）

    1. 在深度学习中,当数据量不够大时候,常常采用下面4中方法:  (1)人工增加训练集的大小. 通过平移, 翻转, 加噪声等方法从已有数据中创造出一批"新"的数据.也就是Data ...

  10. pycharm 代码无法自动补全(自动顺带)的解决方法

    pycharm 中输入关键字等,代码不能自动补全,这种情况一般是pycharm设置了省电模式 点击 File —Power Save Mode,取消勾选 再次输入,代码可以自动顺带出来了