h5新增样式

section标签 使用demo
//h5新增属性

h5新增滚动的标签 <marquee>

<div style="padding-left: 20px;margin-top: 10px;color: #fff;">

<marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>单方向循置参数的设置haha参数的设置参数的设置</marquee>

</div>

　　section标签的使用属性，与案例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>MARQUEE 的使用</title>

	<style>

		*{

			margin: 0;

			padding: 0;

		}

		body{

			font-size: 14px;

		}

	</style>

</head>

<body>

	<!-- 说明：<marquee>标签，它是成对出现的标签，首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

		每个属性对应的属性值：

		behavior属性

	behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。

		bgcolor属性

文字滚动范围的背景颜色，参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。如下所示:<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>

	direction属性

文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。

width和height属性

width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度，height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数，数字表示矩形所占的(宽或高)像素点数，百分数表示矩形所占浏览器窗口的(宽或高)百分比。如下所示:

    <marquee width="300" height="30" bgcolor="red">我宽300像素，高30像素。</marquee>

	hspace和vspace属性

这两个属性决定滚动矩形区域距周围的空白区域.

    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>

    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee> 

loop属性

loop属性决定滚动文字的滚动次数，缺省是无限循环。参数值可以是任意的正整数，如果设置参数值为-1或infinite时将无限循环。如下所示:

    <marquee loop="2">我滚动2次。</marquee>

    <marquee loop="infinite">我无限循环滚动。</marquee>

    <marquee loop="-1">我无限循环滚动。</marquee> 

    scrollamount和scrolldelay属性

这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay)，参数值都是正整数。如下所示:

    <marquee scrollamount="100">我速度很快.</marquee>

    <marquee scrollamount="50">我慢了些。</marquee>

    <marquee scrolldelay="30">我小步前进。</marquee>

    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>

align属性

这个属性决定滚动文字位于距形内边框的上下左右位置。您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等功能

onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

	 -->

	<marquee behavior="alternate">来回滚动参数的设置参数的设置</marquee>

	<div style="padding-left: 20px;margin-top: 10px;color: #fff;">

		<marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>单方向循置参数的设置haha参数的设置参数的设置</marquee>

	</div>

	<div style="padding-left: 30px;margin-top: 10px;">

		<marquee behavior="slid">只滚动一次的设置haha参数的设置参数的设置</marquee>

	</div>

</body>

<script src="../../js/jquery_v3.3.1.js"></script>

<script>

</script>

</html>

　　

section标签实现文字滚动的更多相关文章

  1. repeater控件 + marquee标签 实现文字滚动显示

    各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...

  2. marquee 标签 文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML标签marquee实现滚动效果

    html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...

  4. HTML之marquee(文字滚动)详解

    语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red> ...

  5. “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1

    官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...

  6. <section> 标签

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...

  7. 单行文字滚动就用myslider

    单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...

  8. winfrom 文字滚动

    winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...

  9. js鼠标经过文字滚动，移开还原

    不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...

随机推荐

  1. SW：HTML DOM

    1:节点:nodeType,nodeValue,nodeName getAttributeNode() 方法从当前元素中通过名称获取属性节点. 元素节点nodeValue是null,属性节点nodeV ...

  2. 红警大战JAVA简单版

    代码结构: 相关源码: 武器类: 属性:武器,攻击力,子弹数量. 方法:给属性赋值(set属性()方法) 获取属性值(get属性()方法) package 红警大战简单版; public class ...

  3. 为什么HashMap线程不安全，Hashtable和ConcurrentHashMap线程安全

    HashMap源码 public V put(K key, V value) { return putVal(hash(key), key, value, false, true); } final ...

  4. 解锁技能：sass + node-sass多页面应用编译（转载）

    传送门:https://blog.csdn.net/wx11408115/article/details/78023466

  5. 2018-2019-2 网络对抗技术 20165337 Exp4 恶意代码分析

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...

  6. 【译】索引进阶（七）：SQL SERVER中的过滤索引

    原文链接:传送门. To be continued...

  7. nvm的使用

    nvm能下载并按照指定 的版本,还能切换已安装好的版本,相当的好用

  8. 解决python查询报%d format: a number is required, not str问题

    文章链接:https://blog.csdn.net/u011878172/article/details/72599120 [问题描述] 1.在一条查询语句中,查询条件既包含了整形又包含了字符串型, ...

  9. 浅谈《Linux就该这么学》

    就在去年十月份的时候,偶尔在Linux技术群了看到别人分享的<Linux就该这么学>,好奇的就点进去看看,当时看完首页,突然发现刘遄老师说到心坎里去了,于是就仔细看了看红帽认证的讲解以及后 ...

  10. ajax 调用 .net core WebAPI，报错 400 （Bad Request） Unexpected character encountered while parsing value

    此文由博主前两天的提问及 dudu 的回答整理,地址:https://q.cnblogs.com/list/myquestion 情况说明 基于 .net core 写了一个 Web API,用 po ...