HTML+CSS教程(三)marquee滚动效果
一.marquee
1.marquee标签的属性
scrollHeight:获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth:获取对象的滚动宽度。
offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度。
offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
offsetTop:获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。
offsetWidth:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的宽度。
innerHTML:设置或获取位于对象起始和结束标签内的HTML
align:设置对齐方式(left左对齐;right右对齐;center居中对齐;justify两端对齐)
behavior:
设置滚动的方式(alternate表示在两端之间来回滚动;scroll表示由一端滚动到另一端,会重复;slide表示由一端滚动到另一端,不会重复。)
bgcolor设置滚动的背景颜色。
direction:表示滚动的方向,值left、right、up、down,默认left
height:设置滚动区域的高
width:设置滚动区域的宽
scrollamount:表示运动速度,值是正整数,默认为6
scrolldelay:表示停顿时间,值是正整数,默认为0
οnmοuseοut=“this.start()” :用来设置鼠标移出该区域时继续滚动
onmouseover:=“this.stop()” :用来设置鼠标移入该区域时停止滚动
注:<marquee></marquee>中间的内容可以为文字、图片、,也可以是由程序员生成的文字或图片。
例:
<marquee align="left" behavior="scroll" bgcolor="red" direction="up" width="300" height="200" hspace="50" vspace="20" scrollamount="10" scrolldelay="100" onmouseout="this.start()" onmouseover="this.stop()">
滚动的文字
程序代码
<img src="img/01.jpg"/>
</marquee>
二.
hspace:设置图像周围的空间 ,以像素为单位,指定图像左边和右边的文字与图像之间的距离。
vspace:设置上面的下面的文字与图像之间的距离的像素数。
通常图形浏览器不会在图像和其周围的文字之间留出很多的空间。除非创建一个透明的图像边框来扩大这些间距。否则图像与其周围的文字之间默认两个像素的距离,对于大多数设计者来说太近了。如果把图像放在超链接中,特殊颜色的边框会把你费尽心思留出的所有间距都占据了,而且还会使人们注意到文字与图像是多么接近。hspace和vspace属性可以给图像一个自由呼吸的空间。
浏览器支持
虽然不赞成使用align,但几乎所有的浏览器都支持
提示和注释
提示:可以在外部样式表中使用css的外边距属性和内边距属性,为站点上的所有图像这种一致的边距。与单独为一个图像设置hspace和vspace属性相比,这种方式无疑拥有更高的效率。
兼容性注释:不推荐使用img元素的hspace和vspace属性;在HTML4.01 strict以及XHTML1.0 strict DTD中,不支持img的hspace和vspace属性,请使用css代替。
最新文章
- Boost正则表达式的编译与使用方法集
- Leetcode Longest Palindromic Substring
- 文本过滤工具之AWK
- 同一天的时间差,显示为HHMMSS和指定日期时间部分
- ubuntu之使用sublime text3搭建Python IDE
- 通过开源程序同时解决DNS劫持和DNS污染的问题
- access violation at address General protection fault
- qqq
- Azure 媒体服务发布可靠的视频直播平台
- 用 OUTLOOK VBA 生成 自定义文件夹 邮件列表
- 【转载】Using the Web Service Callbacks in the .NET Application
- hdu4296 贪心
- UESTC_冬马党 CDOJ 882
- ASP.NET Request.QueryString 出现乱码问题
- php随笔11-Thinkphp常用系统配置大全
- Reverse Integer - 反转一个int,溢出时返回0
- Python List insert()方法详解
- Java【第七篇】面向对象之类设计
- FutureBuilder的使用以及防止FutureBuilder不必要重绘的两种方法
- spring boot 访问jsp 弹出下载