跑马灯效果练习

anthtml学习笔记 部份代码参考网络资源.新手学习,难免有错,望高手指正,非常感谢.!!!  滑鼠移入就会停止走马灯效果的演示可能因为权限问题无效.其它效果正常
跑马灯
基础语法增加属性图片也可以跟着跑滑鼠移入就会停止

一般的跑马灯
滑鼠移入就会停止的跑马灯
左右来回跑的跑马灯
带着图形 超链接 一起跑的跑马灯
哇!好多不一样的跑马灯喔~ ^.^
跑马灯可以有很多变化,只要你了解一些关于跑马灯的HTML语言...

跑马灯的基础HTML:
编辑网页,打开源代码
<html>
<head>
...<title>标题</title>
</head>

<body>

...... 贴在这儿
</body>
</html>
<marquee>要跑的文字或物件</marquee>
HTML标签语言通常是配对的,
跑马灯是以 <marquee>开始,</marquee>结尾,
在标签语言中间所包含的就是要〝跑〞的东西。
注 :HTML中『 < 』 与 『 > 』符号,是键盘上的〝大于〞、〝 小于〞 那个符号, 不是注音符号中的 括弧 喔!
 

属性
跑马灯不只只能向左跑,还可以改变 方向、速度... 还有设定范围的的宽高,只要在标签中加上「属性」就可控制。
加在那儿?
  <marquee 加在这> 要跑的文字 </marquee>
  注:加属性前记得按一格「空白键」, 〝空格〞 是「属性」与「属性」间的分段,你可以任意组合使用。
属 性 一 览 表
属 性
其 他 说 明
范 例
范 例 的 完 整 语 法
对齐 align="top" 齐上 top
居中 midden
齐下 botton
 
方向 direction="up" 左 left
右 right
上 up
下 dun
慢慢向上跑 <marquee direction="up" height="50" scrollamount="1">
要跑的文字</marquee>
行为 behavior="altemate" 左右来回 alternate
进入后停止slide
反复 scroll
左右来回弹
<marquee behavior="alternate">
要跑的文字</marquee>
进入后停止 <marquee behavior="slide">
要跑的文字</marquee>
(备注:一般反复scroll的指令不用写,因为那是预设)
height="高的数字" (跑马灯区域的高度)

width="宽的数字"

(跑马灯区域的宽度)
速度 scrollamount="1" 中间的数字是
「滑动步伐的宽」
步伐宽1 步伐宽5 <marquee scrollamount="1"> 要跑的文字</marquee>
<marquee scrollamount="5">要跑的文字</marquee>
背景色
bgcolor="
#0022FF"
"#0022FF"是HTML色码,两个 两个为一组,由00~99,AA~FF所组成,代表红R、绿G、蓝B,
数字越小越深,数字越大越亮。
例: #FF0000,绿 #00FF00, #0000FF,#FFFF00, #9966CC,....。

图片也可以跟着跑
在跑马灯<marquee> 标签开始 至</marquee>结尾,中间所包含的物件 都会跟着跑,包含文字、图形、超链结...
范例: 超链结 都可以夹带一起跑  
写法:
<marquee>
<img src="图形的http位置" width="图宽" height="图高">
<a href="超链结的网址" target="_blank">
要超链结的文字</a>
</marquee>
【说明】
注1. 显示图形的HTML是:<img src="图形的http位置">

   例:我要显示这张小图→

    假设我已把这张叫做「1341151018_8078.gif」的图上传 放到我的http://my.csdn.net里,
    所以图的绝对路径位置是「http://my.csdn.net/uploads/201207/01/1341151018_8078.gif」
    那麼要显示这张图的HTML写法就是↓
    <img src="http://my.csdn.net/uploads/201207/01/1341151018_8078.gif ">
注2. 超链结的HTML是:<a href="链结的http位置">名称</a>
  target="_blank" 表示超链结开启方式是「在新窗口中打开」
    例:我想要超链结到「中关村」,並且开在新窗口,而中关村的网址是「http://my.csdn.net」
      那么这段超链结的HTML写法是:
      <a href="http://my.csdn.net" target="_blank">中关村</a>

滑鼠移入就会停止的跑马灯
范例:
滑鼠移入就会停止的跑马灯
写法:
<marquee onMouseOver="this.stop()" onMouseOut="this.start()" height="50" direction="up" scrolldelay="4" scrollamount="1">要跑的文字</marquee>
【说明】
onMouseOver="this.stop()" 表示滑鼠移入〝范围区〞既「停止」
onMouseOut="this.start()" 表示滑鼠离开便「跑动」
在stop与start后面的『 ( 』与『 )』,是键盘上数字健9与0上方的那个括弧符号,不是数字〝零〞喲 ^.^
PS:以上跑马灯 整段HTML要改的只有〝要跑的文字〞 ^_^

TOP

你可能感兴趣的:(跑马灯)