• 参考学习的各种跑马灯代码


    实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: 滚动的文字

    适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子:

    1、左右弹来弹去的跑马灯

    弹来弹去跑马灯!

    实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

    源码粘贴框: <marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

    2、跑的很快的跑马灯

    跑的很快跑马灯! 

    只要在<marquee>标签内加上“scrollamount=30”参数即可。

    3、带有超级链接的跑马灯

    带有超链接的跑马灯!点我试试?          还有一条呢!点我试试? 

    其实实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

    源码粘贴框: <marquee width=90%> <a href=http://www.22.tc/ target=_blank>带有超链接的跑马灯!点我试试?</a> <a href=http://www.22.tc/ target=_blank>还有一条呢!点我试试?</a> </marquee>

    以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。

    参数 用法介绍 behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动 direction=left,right ,up,down 跑马方向:从左向右,从右向左 loop=100 跑马次数:循环100次,如不写默认为一直循环 width=100%,height=200 跑马范围:宽为100%,高为200像素 scrollamount=20 跑马速度:数越大越快 scrolldelay=500 跑马延时:毫秒数,利用它可实现跃进式滚动 hspace=20,vspace=20 跑马区域与其它区域间的空白大小 bgcolor=#00FFCC 跑马区域的背景颜色 id=gonggao 指定Id onmouseout=gonggao.start() 鼠标离开时重新滚动 onmouseover=gonggao.stop() 鼠标放上去时停止

    4、超链接的跑马灯式提示信息

      把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看:

      源码粘贴框:

    1)将下面代码放在<body>标签下:

    <script> if (!document.layers&&!document.all) event="test" function showtip2(current,e,text){
    
    if (document.all&&document.readyState=="complete"){ document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 document.all.tooltip2.style.visibility="visible" }
    
    else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (document.all) document.all.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } }
    
    function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 }
    
    </script>
    

      

    2)然后在要出现提示信息的链接中,添加onMouseover语句:

    <a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a> <a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a> <a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧技巧</a>

      实现步骤:   (1)先在<body>标签下面插入一段JavaScript代码;

      (2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

  • 相关阅读:
    oracle内核参数详解
    oracle分区表原理学习
    expdp导出时报错ora-16000
    【CS224n-2019学习笔记】Lecture 1: Introduction and Word Vectors
    【SQL必知必会笔记(3)】SELECT语句的WHERE子句数据过滤操作
    【SQL必知必会笔记(2)】检索数据、排序检索数据
    【SQL必知必会笔记(1)】数据库基础、SQL、MySQL8.0.16下数据库、表的创建及数据插入
    win10,64位操作系统安装mysql-8.0.16经验总结(图文详细,保证一次安装成功)
    【机器学习实战笔记(3-3)】关于朴素贝叶斯实现代码中的一些错误总结
    【机器学习实战笔记(3-2)】朴素贝叶斯法及应用的python实现
  • 原文地址:https://www.cnblogs.com/gxbk629/p/3581140.html
Copyright © 2020-2023  润新知