js 实现间隙滚动效果

代码：

<!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: #333;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 0;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(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/border: 1px solid ##f05e6f;-moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */-webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */border-radius: 8px 8px 0 0;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: 144px;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: #999;
}
</style>
</head><body>
<!--  慕课网课程公告开始 -->
<div  id="mooc">
<!--  头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
<!--  头部结束 -->
<!--  中间 -->
<div  id="moocBox"><ul id="con1"><li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li><li><a href="#">2.tab页面切换效果（案例）</a><span>2015-10-09</span></li><li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2015-10-21</span></li><li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2016-11-01</span></li><li><a href="#">5.分页页码制作（案例）</a><span>2016-11-06</span></li><li><a href="#">6.导航条菜单的制作（案例）</a><span>2015-11-08</span></li><li><a href="#">7.信息列表制作(案例)</a><span>2015-11-15</span></li><li><a href="#">8.下拉菜单制作(案例)</a><span>2017-11-22</span></li><li><a href="#">9.如何实现“新手引导”效果</a><span>2017-12-06</span></li></ul><ul id="con2"></ul>
</div>
<!--  中间结束 -->
</div>
<!--  慕课网课程公告结束 --> <script type="text/javascript">var area = document.getElementById('moocBox');var iliHeight = 48;//单行滚动的高度var speed = 50;//滚动的速度var time;var delay= 1000;area.scrollTop=0;area.innerHTML+=area.innerHTML;//克隆一份一样的内容function startScroll(){time=setInterval("scrollUp()",speed);area.scrollTop++;}function scrollUp(){if(area.scrollTop % iliHeight==0){clearInterval(time);setTimeout(startScroll,delay);}else{area.scrollTop++;if(area.scrollTop >= area.scrollHeight/2){area.scrollTop =0;}}}setTimeout(startScroll,500);</script>
</body>
</html>

　　效果：

转载于:https://www.cnblogs.com/guangzhou11/p/7672497.html

js 实现间隙滚动效果相关推荐

js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
JS 实现消息滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js实现title滚动效果
js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了方式一 var titleText = "您有新订单,请及时处理!".s ...
js歌词逐字滚动效果
js歌词逐字滚动效果 @Null - 滨先上效果图目录结构: 歌词文本music.txt 将酷狗歌词KRC用"酷狗歌词(krc)加解密工具"进行解密后可以得到这种歌词文本 HT ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...
js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...
JS实现marquee滚动效果
前言 marquee标签是微软推出的一个增强html标签动画功能的标签,也是W3C不被推荐使用的标签,因为marquee标签存在两个缺点. marquee标签的缺点 1.浏览器间存在兼容性问题(IE8 ...
js实现向上滚动效果
源码: <style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px; ...

js 实现间隙滚动效果

js 实现间隙滚动效果相关推荐

最新文章

热门文章

js 实现 间隙滚动效果

js 实现 间隙滚动效果相关推荐

最新文章

热门文章

js 实现间隙滚动效果

js 实现间隙滚动效果相关推荐