信息滚动效果的实例讲解


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 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
彻底搞懂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
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python实用代码片段收集贴
2015/06/03 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Final类有什么特点
2012/04/25 面试题
物业消防安全责任书
2014/07/23 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
公司催款律师函
2015/05/27 职场文书
Python实现位图分割的效果
2021/11/20 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android