技术标签: html
HTML之marquee(文字滚动)详解
语法:
以下是一个最简单的例子:
代码如下:
Hello, World
下面这两个事件经常用到:
onMouseOut=“this.start()” :用来设置鼠标移出该区域时继续滚动
onMouseOver=“this.stop()”:用来设置鼠标移入该区域时停止滚动
代码如下:
onMouseOut=“this.start()” :用来设置鼠标移出该区域时继续滚动 onMouseOver=“this.stop()”:用来设置鼠标移入该区域时停止滚动
这是一个完整的例子:
代码如下:
这是一个完整的例子
该标签支持的属性多达11个:
align
设定标签内容的对齐方式
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
代码如下:
align=“absbottom”:绝对底部对齐(与g、p等字母的最下端对齐)。
align=“absmiddle”: 绝对中央对齐。
align=“baseline”: 底线对齐。
align=“bottom”: 底部对齐(默认)。
align=“left”: 左对齐。
align=“middle”: 中间对齐。
align=“right”: 右对齐。
align=“texttop”: 顶线对齐。
align=“top”: 顶部对齐。
behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
代码如下:
alternate:表示在两端之间来回滚动。
scroll:表示由一端滚动到另一端,会重复。
slide: 表示由一端滚动到另一端,不会重复。
bgcolor
设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。
代码如下:
设定活动字幕的背景颜色 bgcolor="#006699"
设定活动字幕的背景颜色 bgcolor=“rgb(10%,50%,100%,)”
设定活动字幕的背景颜色 bgcolor=“red”
direction
设定活动字幕的滚动方向
代码如下:
设定活动字幕的滚动方向direction=“down”:向下
设定活动字幕的滚动方向direction=“left”:向左
设定活动字幕的滚动方向direction=“right”:向右
设定活动字幕的滚动方向direction=“up”:向上
height
设定活动字幕的高度
代码如下:
设定活动字幕的高度height=“500”
width
设定活动字幕的宽度
代码如下:
设定活动字幕的宽度width=“500”
hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.
代码如下:
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
</tr>
</table>
vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.
代码如下:
hspace=“100”
loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1
代码如下:
我会不停地走。
我只走两次哦
scrollamount
设定活动字幕的滚动速度,单位pixels
代码如下:
scrollamount=“10”
scrollamount=“20”
scrollamount=“30”
scrolldelay
设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果
代码如下:
scrolldelay=“10”
scrolldelay=“100”
scrolldelay=“1000”
…
移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等
鼠标属性
onMouseOut=this.start() …鼠标移出状态滚动
onMouseOver=this.stop() …鼠标经过时停止滚动
方向
<direction=#> #=left, right ,up ,down 从右向左移!
方式
<bihavior=#> #=scroll, slide, alternate 一圈一圈绕着走!
只走一次就歇了!
来回走
循环
<loop=#> #=次数;若未指定则循环不止(infinite) 只走 3 趟
只走 3 趟
只走 3 趟!
速度
<scrollamount=#> 啦啦啦,我走得好快哟!
延时
<scrolldelay=#> 啦啦啦,我走一步,停一停!
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom
啦啦啦,我会移动耶!
底色
<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 颜色!
面积
<height=# width=#> 面积!
空白
(Margins)<hspace=# vspace=#>
面积!
<marquee id=“iescroller” direction=left height=10 onMouseOut=start(); onMouseOver=stop(); scrollamount=2 scrolldelay=10 scrollleft=“0” scrolltop=“0” behavior=“alternate” bgcolor="#999999" style="color: #ffffff; font-size: 14; font-family: ‘宋体’, ‘Arial’,‘Helvetica’, ‘sans-serif’"title=文字内容> 这是放文字或需要移动的图片(光标放在这里时用INSERT命令就可以插入图片)
marquee的滚动属性参数
从<marquee>开始到</marquee>结束,其中有很多参数,其实,朋友们还是应用得很多了,让图片滚动起来,也是经常经常应用的,下面对这个网页参数的属性做一些简单的描述;
滚动参数:
1:方向:DIRECTION
left—左(默认)
right—右
up------上
down----下
2:方式:BEHAVIOR
SCROLL -------环绕滚动(默认)
SLIDE---------滚动一次
ALTERNATE-----来回滚动
3:次数:LOOP
当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环(默认)
4:速度:SCROLLDELAY
任意自然整数
5:对齐:ALIGN
TOP---------对齐上方
MIDDLE------对齐中部
BOTTOM------对齐下方
6:鼠标的划过与离开
onMouseOver=this.stop(); onMouseOut=this.start();
划过停止滚动。离开,继续滚动
有了以上参数。我们就很容易制作出一个logo图片的任意滚动方式,例如:
很容易对照出。这是一个滚动速度为120MM,从下到上碰壁即返回并对齐中间,鼠标划过图标即停止,点击图标进入〈千娇论坛〉的一个来回滚动的代码。
在背景图片上做滚动字幕
要滚动的文字
参数设置:
a)scrollAmount表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好
b)scrollDelay也是用来控制速度的,表示走走停停,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
c)direction很明显是表示滚动的方向,默认为从右向左:←,因此如果是向左滚动的话不需要次参数。其他可选的值还有right,down,up。滚动方向分别为:right表示→,up表示↑,down表示↓。
d)width和height用来表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
e)behavior是来控制滚动属性的,默认为循环滚动(scroll),同样,如果是循环滚动的话可以不需要此参数。其他可选的值还有alternate(交替滚动),slide(幻灯片效果,指的是滚动一次,然后停止滚动)。
f)每行字的前后和用定义每行字的颜色,大小和字体,如果哪项不需要的话,把代码去掉就行。
图片滚动
用的语句。并且要注意图片名不要中文,要注意区分英文大小写。
图片做超链接
用<a href=>和把包围,并且img必须设border=0,否则图片会出现蓝框。
正确的例子如:
其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。
多张图片排列滚动
通常图片和图片之间用
(回行)或
(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。
代码如:
来源:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee#attr-behavior
文章浏览阅读1.4k次。html标签之Object标签详解的定义和用法定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不_html 实现视频详情多tag标签
文章浏览阅读220次。定理:把n+1个物体放进n个盒子中,至少有一个盒子中含有两个物体理解:ai为第i天下的总棋盘数,显然an为递增序列,对an做部分和序列:如上图所示,上面77项,下面77项,共154项,153个盒子,所有存在aj+21 = ai,所以21 = aj - ai = bi + bi+1 + … + bj相当于19个物体,18个盒子五个点,四个三角形反证:Li <..._鸽巢原理的三个公式
文章浏览阅读6.6w次,点赞20次,收藏194次。欢迎技术交流和帮助,提供所有IT相关的服务,有需要请联系博主QQ: 21497936,若该文为原创文章,未经允许不得转载原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/77847820目录效果 Demo下载地址QCustom..._qcustomplot编译
文章浏览阅读1k次。<text wx:if="{{item.data.status=='待打印'}}" style="color:red">{{item.data.status}}</text><text wx:if="{{item.data.status=='已打印'}}" style="color:green">{{item.data.status}}</text>_小程序 color if
文章浏览阅读210次。转载:http://www.bo56.com/%E7%BA%BF%E4%B8%8Aphp%E9%97%AE%E9%A2%98%E6%8E%92%E6%9F%A5%E6%80%9D%E8%B7%AF%E4%B8%8E%E5%AE%9E%E8%B7%B5/前几天,在一淘网,腾讯网媒和微博商业技术联合组织的技术分享大会上,我分享了《在线PHP问题排查思路与实践》。此博文除了对PPT..._在php开发过程中,线上代码怎么查哪段代码有问题,且不影响线上运行
文章浏览阅读841次,点赞28次,收藏9次。centos 7.x 升级内核 3.x 至 5.x
文章浏览阅读1.3w次。 最近,想在我的YouMoney(http://code.google.com/p/youmoney/)里面增加提取用户操作系统版本信息。比如windows用户,可能要返回Windows XP ,或者Windows 2003, 苹果用户应该返回Mac OS X 10.5.8。用了很多办法,包括在mac系统里调用系统命令,取环境变量,等等。最后无意发现,原来python里里面有个platfor_python 获取当前os版本
文章浏览阅读1.3k次。第一个程序: 使用屏幕和摄像头开发板有配套的摄像头和屏幕,请在上电前检查硬件连接是否正确然后上电,打开串口终端, 按键盘Ctrl+E,然后粘贴以下代码:import sensor, lcdsensor.reset()sensor.set_pixformat(sensor.RGB565)sensor.set_framesize(sensor.QVGA)sensor.run(1)sensor.skip_frames()lcd.init(freq=15000000)while(True)_maixpy reset failed
文章浏览阅读1.1k次。本文主要基于《实用Linux Shell编程》总结,并加入一些网上查询资料和博主自己的推断。其中命令相关的,已抽取出来在另一篇中,可以一起使用。_shell赋值保留换行
文章浏览阅读4.2k次,点赞10次,收藏25次。构造函数、初始化列表、析构函数_构造函数和析构函数
文章浏览阅读281次。1.问题 1、何为分布式何为微服务? 2、为什么需要分布式? 3、分布式核心理论基础,节点、网络、时间、顺序,一致性? 4、分布式是系统有哪些设计模式? 5、分布式有哪些类型? 6、如何实现分布式? 2.关键词节点,时间,一致性,CAP,ACID,BASE,P2P,机器伸缩,网络变更,负载均衡,限流,鉴权,服务发现,服务编排,降级,熔断,幂等,分库分表,分片分区,自动运维,容错处理,全栈监控,故障恢复,性能调优3.全文概要随着移动互联网_分布式架构知识体系
文章浏览阅读1.5k次,点赞6次,收藏13次。深信服防火墙配置SSL VN_深信服ssl配置教程