html 跑马灯

最新推荐文章于 2024-04-03 22:49:07 发布
最新推荐文章于 2024-04-03 22:49:07 发布
阅读量222 收藏
点赞数
分类专栏： h5 文章标签： 跑马灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38730338/article/details/102823963
版权

废话不多说，直接代码copy进去运行就知道了

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
        .page_1366_768{
            width: 1366px;
            height: 768px;
			margin: 0 auto;
            background-color: #009;
        }
		body{
            margin: 0;
			padding: 0;
            background-color: #900;
			font-family:'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
			font-size:24px;
		}
		.head{
			background-color: #14b9d6;
			color: #fff;
		}
		.h1{
			display: inline-block;
			font-size: 36px;
			margin:0px;
			padding:20px 35px;
		}
		.h_right{
			float: right;
			display: inline-block;
		}
		.h_right .date{
			display: inline-block;
			font-size: 20px;
			font-weight: bold;
			line-height: 25px;
			padding:18px 0;
			text-align: right;
		}
		.h_right .time{
			font-size:42px;
			font-weight: bold;
			float: right;
			padding:16px 35px;
		}
		
		.content{
			width:100%;
            background-color: #fff;
		}
		.content table{
			width: 100%;
			border-collapse: collapse;
		}
		.content table th{
			color: #fff;
			border-top: 1px solid #7be2f4;
			background-color: #038fa7;
		}
		.content table td,
		.content table th{
			text-align: center;
			line-height:72px;
		}
		.content table tr{
			border-bottom: 1px solid #bfe4ea;
		}
		.content table tr:nth-of-type(odd){
			background-color: #def8fc;
		}
		.c_f00{
			color: #f00;
		}
		.c_00f{
			color: #14b9d6;
		}
		ul,ul li{
			list-style: none;
			margin: 0;
		}
		.info{
			font-size:24px;
			overflow:hidden;
			height:144px;
		}
		.info ul li{
			line-height:2;
			text-align: center;
		}
	</style>
	<body>
        <div class="page_1366_768">
            <div class="head">
                <h1 class="h1">南京卷烟厂月台排队信息</h1>
                <div class="h_right">
                    <span class="date">2019/03/26<br />星期三</span>
                    <div class="time">18 : 48 : 36</div>
                </div>
            </div>
            <div class="content">
                <table>
                    <tr>
                        <th>序号</th>
                        <th>车牌号</th>
                        <th>驾驶号</th>
                        <th>联系电话</th>
                        <th>月台</th>
                        <th>作业</th>
                        <th>状态</th>
                        <th>入园时间</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>苏A16828</td>
                        <td>张南风</td>
                        <td>18649604646</td>
                        <td>C-1号</td>
                        <td>发货</td>
                        <td>准备作业</td>
                        <td>09:06</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>苏A56515</td>
                        <td>苏清枫</td>
                        <td>18646658899</td>
                        <td>C-2号</td>
                        <td>发货</td>
                        <td>开始作业</td>
                        <td>09:22</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>苏A52648</td>
                        <td>张志强</td>
                        <td>18655895858</td>
                        <td>C-3号</td>
                        <td>发货</td>
                        <td><span class="c_f00">等待作业</span></td>
                        <td>09:06</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>苏A16828</td>
                        <td>张华扬</td>
                        <td>18649604896</td>
                        <td>C-4号</td>
                        <td>发货</td>
                        <td>开始作业</td>
                        <td>08:34</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>苏A56355</td>
                        <td>李天华</td>
                        <td>18955685594</td>
                        <td>XH-1号</td>
                        <td><span class="style_c c_00f">卸货</span></td>
                        <td>准备作业</td>
                        <td>08:44</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>苏A56795</td>
                        <td>李华阳</td>
                        <td>18955686364</td>
                        <td>XH-2号</td>
                        <td><span class="style_c c_00f">卸货</span></td>
                        <td>准备作业</td>
                        <td>08:59</td>
                    </tr>
                </table>
                <div class="info" id="info">
                    <ul id="list1" onMouseOut="Up()" onMouseOver="Stop()">
                        <li>请<span class="c_00f"> 苏AE6554 </span>到<span class="c_f00"> C-1号 </span>月台进行 发货 作业！</li>
                        <li>请<span class="c_00f"> 苏AE6889 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业！</li>
                        <li>请<span class="c_00f"> 苏A55939 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业！</li>
                    </ul>
                    <ul id="list2"></ul>
                </div>
            </div>
            <script type="text/javascript">
                var info=document.getElementById("info");
                var list1=document.getElementById("list1");
                var list2=document.getElementById("list2");
                var speed=50;
                list2.innerHTML=list1.innerHTML;
                function  ScrollUp(){
                    if( info.scrollTop>=list1.scrollHeight){
                        info.scrollTop=0;
                    }else
                       info.scrollTop++;
                }
                var i=setInterval(ScrollUp,speed);
                function Stop(){
                    clearInterval(i);
                }
                function Up(){
                    i=setInterval("ScrollUp()",speed);
                }

            </script>
        </div>	
    </body>
</html>

 

铁憨憨b
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML跑马灯
12-15
### HTML跑马灯知识点解析 #### 一、HTML跑马灯概述 HTML跑马灯是一种在网页上实现文字或图片滚动显示效果的技术。通过使用`<marquee>`标签及其属性，可以轻松创建出动态的跑马灯效果。跑马灯在早期网页设计中较为...
html制作跑马灯
wenqi1的博客
08-23 8787
在body内输入以下内容 <marquee> 输入内容 </marquee> 在head内写个style <style> marquee{ width:200px; height:200px; bgcolor:red; } </style> 这样简单的跑马灯就出来了。 一下内容要添加在marquee标签内： 指定跑马灯的方向是向上的：direction="up"，左..
HTML之marquee(文字滚动)详解
dddp75921的博客
10-20 671
语法： <marquee></marquee> 以下是一个最简单的例子： 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到： onMouseOut="this.start()" ：用来设置鼠标移...
跑马灯 marquee
a_靖的博客
08-27 1126
1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跑马灯效果</title> <meta name=viewport content="width=device-width,initial-scale=1"> ...
HTML标签之文字滚动效果(跑马灯效果)，字节跳动前端岗位面试分享
2401_83621136的博客
04-03 1567
存机制描述一下二叉树, 并说明二叉树的几种遍历方式?项目类问题技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
html跑马灯
03-07
### HTML跑马灯效果详解 #### 一、HTML跑马灯简介 HTML跑马灯是一种在网页上实现文字或图片滚动显示的效果，常用于新闻滚动条、广告展示等场景。其核心是通过`<marquee>`标签来实现，该标签为非标准HTML标签，但在...
html跑马灯特效
05-18
电脑中的跑马灯，跑马灯在编程中，通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。证券业中常用“跑马灯”来显示不断变化的股票行情；实际应用中也常通过“跑马灯”...
HTML5文字跑马灯动画特效
06-24
HTML5文字跑马灯动画特效是一种常见的网页动态展示方式，常用于吸引用户的注意力或创造独特的视觉体验。在本文中，我们将深入探讨如何使用Splitting.js库结合CSS3属性来实现这种效果，以及它在店铺标题等场景中的...
HTML5文字跑马灯动画特效特效代码
03-20
在本案例中，我们关注的是HTML5中的文字跑马灯动画特效，这是一种通过CSS3属性来实现的文字滚动效果，通常用于吸引用户的注意力或创建动态展示效果。这种效果可以应用于店铺标题、广告宣传等场景。 Splitting.js是...
css - html跑马灯/走马灯效果
tttzzzqqq2018的博客
09-01 1045
实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。需要说明的是该效果在 Netscape下是看不到的。就行了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜色，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上。实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“滚动的文字”语句。如果你想给跑马灯的文字加上颜色，换用不同的字体（默认是宋体，换体就要加代码），只要在文字前加上。
HTML中的跑马灯效果（<marquee>标签）
努力努力再努力
03-15 4716
跑马灯效果： 格式： video的用法 要写的内容 属性： scrollamount="1/2/3/4/5/6/..../n"：控制内容跑马的速度，数值越大越快。 direction="left/right/up/down" : 控制内容跑马方向。（向左，右，上，下
marquee相关属性
YiZhiMei01的博客
12-01 3419
marquee标签的几个重要属性 标题1.direction：滚动方向(包括4个值：up、down、left、right) 说明：up：从下向上滚动；down：从上向下滚动；left：从右向左滚动；right：从左向右滚动。 语法：<marquee direction="滚动方向">...</marquee> 标题 2.behavior...
HTML——网页版跑马灯（简单的背景颜色跑马灯）
qq_45183859的博客
08-09 3248
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 100px; /*宽*/ height: 100px; /*高*/ background-color: red; /*背景颜色*/ position: ab
走马灯效果（html+css+js）
weixin_53185464的博客
06-18 1783
【代码】走马灯效果（html+css+js）
HTML标签之文字滚动效果(跑马灯效果)，GitHub标星8k
最新发布
2401_84103714的博客
04-03 936
UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**bgcolor:设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。absbottom：绝对底部对齐（与g、p等字母的最下端对齐）direction:设定活动字幕的滚动方向。设定活动字幕的滚动方向向下。设定活动字幕的滚动方向向右。设定活动字幕的滚动方向向上。
HTML marquee标签属性详解
CWJ199002的博客
09-18 1642
请大家先看下面这段代码：<marqueedirection=upbehavior=scrollloop=3scrollamount=1scrolldelay=10align=topbgcolor=#ffffffheight=300 width=30%hspace=20 vspace=10onmouseover=this.stop() onmouseout=this.start(...
HTML中marquee（滚动标签）
m0_64520392的博客
06-12 2993
HTML中marquee（滚动标签）
html简单的跑马灯效果
热门推荐
zww学习笔记
08-07 2万+
很多项目中都会遇到有类似跑马灯效果的消息轮播展示，做了一个简单的消息轮播展示。 主要代码如下： html<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>跑马灯效果</title> <meta name="viewport" content="initial-scale=1.0, m
html跑马灯文字代码
06-11
以下是一个基本的HTML跑马灯文字代码示例： ```html 这是跑马灯文字 ``` 其中，`<marquee>` 标签用于创建一个跑马灯效果的区域。`behavior` 属性指定跑马灯的滚动方式，可以设置为 `"scroll"`（滚动）或 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值