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. 利用LI标签仿照a中Link进行页面跳转？

    点击LI时仿照A标签进行页面跳转html: <ul> <li link="/school/schooldetail/success_detail?case_id=<! ...

  2. pythonのdjango select_related 和 prefetch_related()

    在数据库有外键的时候,使用select_related() 和 prefetch_related() 可以很好的减少数据库请求次数,从而提高性能. (1)select_related()当执行它的查询 ...

  3. JSR-303 数据校验学习

    一.JSR-303简介JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是Hibernate Validator. 此实现与 Hibernate ...

  4. Qt+mpg123+openal播放MP3流

    #ifndef PLAYSTREAM_H #define PLAYSTREAM_H #include <QObject> #include "../libMPG123/mpg12 ...

  5. Java编程思想(前十章)

    Java编程思想 有C++编程基础的条件下, 前10章可以快速过一下,都是基本语法,不需要花太多时间. 着重中后段的一些章节,类型信息.泛型.容器.IO.并发等. 中文翻译版 阅读地址 对于一个架构师 ...

  6. 【medium】990. Satisfiability of Equality Equations 并查集

    Given an array equations of strings that represent relationships between variables, each string equa ...

  7. lua简单入门

    一.安装windows下的lua环境,luaforwindows 下载最新的5.3版本,下载地址: https://sourceforge.net/projects/luabinaries/files ...

  8. springboot动态多数据源

    参考文章:https://www.cnblogs.com/hehehaha/p/6147096.html 前言 目标是springboot工程支持多个MySQL数据源,在代码层面上,同一个SQL(Ma ...

  9. 一位6年老Android面经总结

    声明|作者:android进阶者地址:https://www.jianshu.com/p/d77873cbad5f 前言 准备面试其实已经准备了挺久了,当时打算面试准备了差不多以后,跟公司谈谈涨薪的事 ...

  10. Linux小知识收集（不断更新）

    一.说明 以下知识点都来自网络收集,只是给自己记录以免下次同样的问题的时候会忘记,如果知道出处,我都会进行标注,如果侵权的话,请邮件通知我,我会及时删除的 二.知识点 1.将centos的源修改为阿里 ...