section标签实现文字滚动

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>

  

原文地址:https://www.cnblogs.com/lvxisha/p/10651651.html

时间: 2024-10-11 14:11:56

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

html里面有一个控制文字滚动的标签marquee,比较有用。

本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的.本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 4.3.1 设置文字滚动 HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>.在HTML代码中可使其作用区文字滚动,默认为从右到左,循环滚动.在D:\we

HTML标签marquee实现滚动效果

HTML标签marquee实现滚动效果 转载自:http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html 页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区

JS实现Li列表的无缝垂直文字滚动代码

非Table模式的新闻列表滚动,学习CSS的朋友可能都能做出这种效果来.运用了CSS中的Li列表标签,加上javaScript代码控制,完成完美的无缝滚动效果.在兼容性方面,在ie6,7,8,9,firefox等主流浏览器下均测试通过,用的时候您只需改变一下样式和大小,再将Js封装起来,用时候调用,就更简洁了,相信这款实用的文字滚动正是你需要的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

C# 文字滚动特效(上下滚动)

本程序改编至网上下载的一个自定义控件,原控件是左右滚动效果,类似于跑马灯效果,由于项目需要,改编为上下滚动. 前期没有实现自动折行,今天刚加上自动折行. using System; using System.Collections; using System.ComponentModel; using System.Drawing; using System.Drawing.Drawing2D; using System.Data; using System.Windows.Forms; usi

Case1 文字滚动

1.在home页面添加一个矩形(标题),在其下添加一个动态面板. 2.动态面板为1,其状态为1.1 3.双击进入状态1.1, 添加新的动态面板2,(面板长度大于动态面板1) 4.动态面板为2,其状态2.1, 并添加相关文字叙述. 5.其结构如图所示 6.设置页面交互,在home页面设置交互页面,新增用例1,如图所示 7.预览即可得到文字滚动效果

兼容性不错的文字滚动特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Js间断/连续的文字滚动代码

Js间断/连续的文字滚动代码 Js文字滚动代码,可设置间断滚动和连续滚动.滚动时是向上滚动的,控制Li列表滚动,兼容性表现地不错,兼容IE/火狐.Opera等浏览器,代码如下: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 02 <html> 03 <head> 04 <title>文字间隔滚动代码-兼容IE和FireFox</title>

android如何写一个循环文字滚动的TextView

效果图: 在layout中这样来声明: <com.kaixin001.view.ScrollText android:id="@+id/news_statustxt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:paddingRight="1