代码:

<!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. win32程序使用CString

    https://www.cnblogs.com/qingtian224/p/5833456.html uafxcwd.lib(afxmem.obj) : error LNK2005: "vo ...

  2. [css知识体系]flexbox模型

    背景 flexbox 模型的产生主要是为给布局.对齐和容器内的空间分配提供一个更有效的方法,即使尺寸未知或是动态改变的(flex,收缩,弹性 就是为此命名). flex布局使得容器能够改变子元素的宽高 ...

  3. java面试题最容易犯错

    1. static 和 final 的用法 static 的作用从三个方面来谈,分别是静态变量.静态方法.静态类. 静态变量:声明为 static 的静态变量实质上就是全局变量,当声明一个对象时,并不 ...

  4. Vector、ArrayList、LinkedList、CopyOnWriteArrayList区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11443907.html CopyOnWriteArrayList CopyOnWriteArrayLi ...

  5. Mac上使用频率最高的七组快捷键

    不管Mac还是Windows,会使用快捷键都能让你的工作效果提升不少,但是快捷键那么多一下子全部记下来也不太实际,这里小编就整理了七组使用频率最高的快捷键,希望可以帮到大家. https://www. ...

  6. MariaDB 选择查询

    在本章中,我们将学习如何从表中选择数据. SELECT语句检索所选行. 它们可以包括UNION语句,排序子句,LIMIT子句,WHERE子句,GROUP BY ... HAVING子句和子查询. 查看 ...

  7. mysql inner join用法

    inner join(等值连接):只返回两个表中联结字段相等的行. left join(左联接):返回包括左表中的所有记录和右表中联结字段相等的记录. right join(右联接):返回包括右表中的 ...

  8. MTD系统架构和yaffs2使用、Nandflash驱动设计

    一.MTD系统架构 1.MTD设备体验 FLASH在嵌入式系统中是必不可少的,它是bootloader.linux内核和文件系统的最佳载体. 在Linux内核中引入了MTD子系统为NORFLASH和N ...

  9. atexit函数学习

    函数名: atexit 头文件:#include<stdlib.h> 功 能: 注册终止函数(即main执行结束后调用的函数) 用 法: void atexit(void (*func)( ...

  10. [NOIP模拟测试38]题解

    来自达哥的问候…… A.金 显然本题的考察点在于高精而不是裴蜀定理 根据裴蜀定理易得答案为Yes当且仅当$gcd(n,m)=1$,那么考虑怎么在高精度下判互质. 如果$n,m$都能被2整除,那么显然不 ...