Javascript实现信息滚动效果的方法

<html>
<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>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="con2">
</ul>
</div>
<!-- 中间结束 -->
</div>
<!-- 慕课网课程公告结束 -->
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/2881064178dinfeng/p/7066496.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# delegate与event,委托与事件

文章目录委托示例事件实例博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 委托和事件是C#中两个比较复杂的概念&#xff0c;这篇文章介绍两个概念与基本用法&#xff0c;让大家理解C#中的事件处理机制。 委托 委托也叫代理&#xff0c;就是把…

路由器与交换机的工作原理

路由器与交换机的工作原理 计算机网络往往由许多种不同类型的网络互连连接而成。如果几个计算机网络只是在物理上连接在一起&#xff0c;它们之间并不能进行通信&#xff0c;那么这种“互连”并没有什么实际意义。因此通常在谈到“互连”时&#xff0c;就已经暗示这些相互连接的…

Java的四种引用,强弱软虚,用到的场景(转+补充)

Q1&#xff1a;引用队列是什么&#xff1f;如何使用&#xff1f;使用的场景有哪些&#xff1f; A1:oracle的api文档的描述&#xff1a; https://docs.oracle.com/javase/7/docs/api/java/lang/ref/ReferenceQueue.htmlReference queues, to which registered reference objects…

C# lambda表达式与匿名方法

文章目录匿名方法Lambda表达式实例实例博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 C#中的匿名方法是在C#2.0引入的&#xff0c;它终结了声明委托的唯一方法是使用命名方法的时代。在C#更高版本中&#xff0c;Lambda表达式取代了匿名方法&a…

LINUx打包命令汇总

.tar 解包&#xff1a;tar xvf FileName.tar 打包&#xff1a;tar cvf FileName.tar DirName &#xff08;注&#xff1a;tar是打包&#xff0c;不是压缩&#xff01;&#xff09; ——————————————— .gz 解压1&#xff1a;gunzip FileName.gz 解压2&#xff1a;…

常用的相似度计算

在数据分析和数据挖掘的过程中&#xff0c;我们经常需要知道个体间差异的大小&#xff0c;进而评价个体的相似性和类别。最常见的是数据分析中的相关分析&#xff0c;数据挖掘中的分 类和聚类算法&#xff0c;如K最近邻&#xff08;KNN&#xff09;和K均值&#xff08;K-Means&…

玩转C#窗体-属性、方法和事件详细说明

文章目录简介Windows窗体的基本属性一、布局属性1、StartPosition属性2、Location属性3、尺寸属性4、WindowsState属性5、Autoscroll属性6、AutoSize属性二、样式属性1、ControlBox属性2、MaximizeBox属性3、MinimizeBox属性4、HelpButton属性5、ShowIcon属性6、Icon属性7、Sho…

for循环和数组练习

//公鸡2文&#xff0c;母鸡1文&#xff0c;小鸡半文&#xff0c;每种至少一只&#xff0c;100文买100只鸡有多少种可能var ci 0; for(var g1;g<50;g){for(var m1;m<100;m){for(var x1;x<100;x){if(g*2m*1x*(0.5)100&&gmx100){ci1;console.log("买公鸡&qu…

CMD下查看路由表

在cmd下面输入route print 就可以查看路由表 如何读懂路由表如何读懂路由表 源码:--------------------------------------------------------------------------------Active Routes: Network Destination Netmask Gateway Interface M…

c# automapper 使用

一、最简单的用法 有两个类User和UserDto 1 public class User2 {3 public int Id { get; set; }4 public string Name { get; set; }5 public int Age { get; set; }6 }7 8 public class UserDto9 { 10 public string Na…

js正则归纳

/* * 正则的缓存区 * 一、 var numadb1122;var reg/(\d)\1(\d)\2/gi;console.log(num.match(reg));//[ 1122 ]二、普通字符&#xff1a;a b c 1 2 3 特殊字符&#xff1a;\d \w \D //w d 是什么三、元字符中限定符* &#xff1a; 匹配0到多 &#xff1a; 匹配1到…

洛谷 P1469 找筷子

题目描述 经过一段时间的紧张筹备&#xff0c;电脑小组的“RP餐厅”终于开业了&#xff0c;这天&#xff0c;经理LXC接到了一个定餐大单&#xff0c;可把大家乐坏了&#xff01;员工们齐心协力按要求准备好了套餐正准备派送时&#xff0c;突然碰到一个棘手的问题&#xff0c;筷…

玩转C#控件-常用控件属性

文章目录概述Control类的基本属性1、Name属性2、Text属性3、Anchor属性4、Dock属性Control类的方法和事件博主写作不容易&#xff0c;孩子需要您鼓励 万水千山总是情 , 先点个赞行不行 概述 控件是包含在窗体上的对象&#xff0c;是构成用户界面的基本元素&#xff0c;也是…

LazyT 提供对延迟初始化的支持

延迟初始化 就是在第一次使用的时候在 进行类的初始化 public class Student{public Student(){this.Name "DefaultName";this.Age 0;Console.WriteLine("Student is init...");}public string Name { get; set; }public int Age { get; set; }} public…

264标准中高复杂度的三方面

一、运功估计搜索 二、码率控制 三、滤波算法 在264中&#xff0c;这三方面占据了绝大部分的计算复杂度。具体原因或是优化的具体步骤有时间补上。

ie浏览器不支持多行隐藏显示省略号

平时在写页面过程中&#xff0c;相信大家都遇到过文本显示多行后用省略号代替的问题&#xff0c;来看看代码&#xff1a; p{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp:12;//表示显示12行之后用省略号代替-webkit-box-orient:vertical…

API设计原则 - Qt官网的设计实践总结

原文链接&#xff1a;API Design Principles - Qt Wiki 基于Gary的影响力上 Gary Gao 的译文稿&#xff1a;C的API设计指导 译文发在酷壳 - CoolShell&#xff1a;API设计原则&#xff0c; 2017-07-25 API设计原则 - Qt官网的设计实践总结 &#x1f34e; 译序 Qt的设计水准在业…

python带参装饰器的改良版

简单点就是这种 def deco2(param1):def _deco2(fun):def __deco2(*args, **kwargs):print (param)fun(*args, **kwargs)return __deco2return _deco2deco2 # 错误的写法 def f2(strx):print (strx)f2(hello) 运行上面这个&#xff0c;期待打印1和hello 实际上是不…

H.264边缘块进行帧内预测时,上边缘和左边缘块的预测情况。

仅仅介绍上边缘块需要用到上面的像素&#xff08;不存在&#xff09;&#xff08;例如垂直模式&#xff09;&#xff0c;左边缘快需要用到左边的像素&#xff08;不存在&#xff09;&#xff08;例如水平模式&#xff09;的情况。 H.264 I帧边缘块的处理 I帧的第一个左上的边缘…

P1021 邮票面值设计

P1021 邮票面值设计 题目描述 给定一个信封&#xff0c;最多只允许粘贴N张邮票&#xff0c;计算在给定K&#xff08;NK≤15&#xff09;种邮票的情况下&#xff08;假定所有的邮票数量都足够&#xff09;&#xff0c;如何设计邮票的面值&#xff0c;能得到最大值MAX&#xff0c…