信息滚动效果的实例讲解


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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
jquery的颜色选择插件实例代码
Oct 02 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
详解用node-images 打造简易图片服务器
May 08 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python中for循环详解
2014/01/17 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
《月亮湾》教学反思
2014/04/14 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
南京青奥会口号
2014/06/12 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫