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. dsp实验一 常见问题教程

    1.选择合适阅读材料:卖油翁.将进酒,等. 2.录音设备三选一:某种电脑声卡+线上convert/楼月mp3录音软件+格式工厂(我选的)/Matlab (注:这是目前已知的方法,我只用了第二个) 3. ...

  2. python序列化与反序列化（json与pickle）

    在python中,序列化可以理解为将python中对象的编码格式转换为json(pickle)格式的字符串,而反序列化可以 理解为将json(pickle)格式的字符串转换为python中对象的编码格 ...

  3. ps切图技巧

    步骤1: ps打开psd文件 步骤2: 点击移动工具,观察左上角的自动选择是否有勾选 ,如果没有最好勾选,对应的选项有图层和组,善于切换这个功能能够有效快速的找到你要的区域 步骤3: 找到要切图的元素 ...

  4. [工具开发] 分享两个基于Heapster 和 Influxdb 的 Grafana 监控仪表盘模板

    Info Collector: Heapster - /heapster- --metric-resolution=30s- --sink=influxdb:http://influxdb.defau ...

  5. pythonのdjango 在控制台用log打印操作日志

    在Django项目的settings.py文件中,在最后复制粘贴如下代码: LOGGING = { 'version': 1, 'disable_existing_loggers': False, ' ...

  6. Linux的简单命令

    Linux的简单命令 1.更改linux服务器的登录密码 成功登录后输入命令: passwd 然后按照提示操作即可 2.在当前路径下新建文件夹:mkdir 新建文件夹名 3.解压和压缩文件tar.gz ...

  7. Resharper使用详解(转)

    万恶的360文档 解除复制的限制 Ctrl + Shift + i 打开控制台,也可以鼠标右键,选最后一个检查也可以打开控制台,输入: setInterval = null; //将内置无限循环函数设 ...

  8. Java中int和String类型之间转换

    int –> String int i=123; String s=""; 第一种方法:s=i+""; //会产生两个String对象 第二种方法:s=S ...

  9. Flask+SQLAlchemy+alembic+Flask-RESTful使用

    前言 其实准备把这篇删掉,先写Flask-restful相关的,后来想想大体框架还是先写出来,这两天踩了很多坑,有的谷歌也没有答案.一直摸索也总算是开始了. 正文 SQLAlchemy/alembic ...

  10. 高可用Redis(五)：瑞士军刀之慢查询，Pipeline和发布订阅

    1.慢查询 1.1 慢查询的生命周期 步骤一:client通过网络向Redis发送一条命令 步骤二:由于Redis是单线程应用,可以把Redis想像成一个队列,client执行的所有命令都在排队等着s ...