zoukankan      html  css  js  c++  java
  • 跑马灯效果练习

    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

  • 相关阅读:
    字符数组(判断字符串大小)
    http请求文件流
    webservice接口调用
    面试基础-线程(一)
    面试基础-redis(二)
    面试基础-redis(一)
    面试基础--JVM
    【转】支付系统
    springcloud搭建高可用注册中心的时候注册中心在unavailable-replicas中的问题
    springboot+javafx所有依赖一起打包
  • 原文地址:https://www.cnblogs.com/fanghui/p/2774281.html
Copyright © 2011-2022 走看看