信息滚动效果的实例讲解


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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
js一组验证函数
2008/12/20 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python字符串中查找子串小技巧
2015/04/10 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Django开发中复选框用法示例
2018/03/20 Python
python查看模块安装位置的方法
2018/10/16 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python如何对链表操作
2020/10/10 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
社区关爱留守儿童活动方案
2014/08/22 职场文书
以权谋私检举信范文
2015/03/02 职场文书
小学教师党员承诺书
2015/04/27 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL