信息滚动效果的实例讲解


Posted in Javascript onSeptember 18, 2017

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>向上无缝滚动</title>
 <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>

<body>
<!-- 慕课网课程公告开始 -->
<div id="mooc">
 <!-- 头部 -->
 <h3 id="moocTitle">最新课程<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self">更多>></a> </h3>
 <!-- 头部结束 -->
 <!-- 中间 -->
 <div id="moocBox">
  <ul id="con1">
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1.学会html5 绝对的?潘磕嫦?ò咐??lt;/a><span>2013-09-18</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5.分页页码制作(案例)</a><span>2013-11-06</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >7.信息列表制作(案例)</a><span>2013-11-15</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
  </ul>
  <ul id="con2">
  </ul>
 </div>
 <!-- 中间结束 -->
</div>
<!-- 课程公告结束 -->

<script type="text/javascript" src="js.js"></script>
</body>
</html>

css:

body {
 font-size: 12px;
 line-height: 24px;
 text-algin: center;  /* 页面内容居中 */
}
body, h3, ul, li, a {
 margin: 0;
 padding: 0;   /* 去掉所有标签的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;
 margin-bottom: 10px;
 overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
}
#mooc ul{
 display: inline-block;
}
#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;
}

js:

var box = document.getElementById("moocBox");
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
var speed = 50;
con2.innerHTML = con1.innerHTML;
function scrollUp() {
 if(box.scrollTop>=con1.scrollHeight){
  box.scrollTop = 0;
 }else {
  box.scrollTop++;
 }
}
var myScroll = setInterval("scrollUp()",speed);
box.onmouseover = function () {
 clearInterval(myScroll);
};
box.onmouseout = function () {
 myScroll = setInterval("scrollUp()",speed);
}

效果图:

信息滚动效果的实例讲解

以上这篇信息滚动效果的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
You might like
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
表单内同名元素的控制
2006/11/22 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
对python中各个response的使用说明
2020/03/28 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
大学生创业事迹材料
2014/12/30 职场文书
地陪导游欢迎词
2015/01/26 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python