向上翻动的网站公告代码(JS+Marquee)教程Html

元气糖发布于:2019-1-22 1075

=======================================================

第一种,使用JS控制(推荐),JS脚本必须放在公告代码之后

=======================================================

以下代码可直接放在html文档的<body></body>间:

<style>

.scrollTxt{width:200px;height:24px;overflow:hidden;font-size:14px;line-height:18px;}

.scrollTxt a{display:block;width:200px;float:left;height:24px;overflow:hidden;padding-left:12px;color:#ff4400}

.scrollTxt a:hover {COLOR: #00c;}

.scrollTxt p{overflow: hidden; height: 18px; line-height: 18px;}

</style>

<div class="scrollTxt">

<p id="infan2010">

<a href="http://" target="_blank">人民币创2010年汇率新高</a><br>

<a href="http://" target="_blank">中国南方省退休年龄延长</a><br>

<a href="http://" target="_blank">深圳市假公交案水落石出</a><br>

<a href="http://" target="_blank">芙蓉姐姐征婚选百度知道</a><br>

<a href="http://" target="_blank">中国明日向日本鬼子开炮</a><br>

</p>

</div>

<script type="text/javascript">

(function() {

    var pthis = this;

    this.$ = function(a) {

        if (document.getElementById) {

            return eval('document.getElementById("' + a + '")')

        } else {

            if (document.layers) {

                return eval("document.layers['" + a + "']")

            } else {

                return eval("document.all." + a)

            }

        }

    };

    this.SinaDotMarquee = function(id, h, s, d) {

        var apthis = this;

        var t;

        var p = false;

        var o = pthis.$(id);

        o.style.overflow = "hidden";

        o.style.height = h + "px";

        o.style.lineHeight = h + "px";

        o.innerHTML += o.innerHTML;

        o.onmouseover = function() {

            p = true

        };

        o.onmouseout = function() {

            p = false

        };

        o.scrollTop = 0;

        this.doScroll = function() {

try{

t = setInterval(apthis.scrolling, s);

if (!p) {

o.scrollTop += 2

}

}catch(e){}

        };

        this.scrolling = function() {

try{

if (o.scrollTop % h != 0) {

o.scrollTop += 2;

if (o.scrollTop >= o.scrollHeight / 2) {

o.scrollTop = 0

}

} else {

clearInterval(t);

setTimeout(apthis.doScroll, d)

}

}catch(e){}

        };

        setTimeout(apthis.doScroll, d)

    };

    try {

        var SinaDotMarquee01 = new SinaDotMarquee("infan2010", 24, 20, 2000)

    } catch(e) {}

})();

</script>

可控制参数:new SinaDotMarquee():24,字符高度; 20:字符跳出的速度,每60=1秒,推荐20; 2000:字符停留的时间,每1000=1秒,可设100-10000

==================================================

第二种,使用<marquee></marquee>

=================================================

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">这是一个例子</marquee> 

该标签支持的属性多达11个: 

align 

设定<marquee>标签内容的对齐方式 

absbottom:绝对底部对齐(与g、p等字母的最下端对齐) 

absmiddle:绝对中央对齐 

baseline:底线对齐 

bottom:底部对齐(默认) 

left:左对齐 

middle:中间对齐 

right:右对齐 

texttop:顶线对齐 

top:顶部对齐 

代码如下: 

<marquee align="absbottom">align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 </marquee> 

<marquee align="absmiddle">align="absmiddle": 绝对中央对齐。 </marquee> 

<marquee align="baseline">align="baseline": 底线对齐。 </marquee> 

<marquee align="bottom">align="bottom": 底部对齐(默认)。 </marquee> 

<marquee align="left">align="left": 左对齐。 </marquee> 

<marquee align="middle">align="middle": 中间对齐。 </marquee> 

<marquee align="right">align="right": 右对齐。 </marquee> 

<marquee align="texttop">align="texttop": 顶线对齐。 </marquee> 

<marquee align="top">align="top": 顶部对齐。 </marquee> 

behavior 

设定滚动的方式: 

alternate: 表示在两端之间来回滚动。 

scroll: 表示由一端滚动到另一端,会重复。 

slide:  表示由一端滚动到另一端,不会重复。 

代码如下: 

<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee> 

<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee> 

<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee> 

bgcolor 

设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。 

代码如下: 

<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee> 

<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee> 

<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee> 

direction 

设定活动字幕的滚动方向 

代码如下: 

<marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee> 

<marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee> 

<marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee> 

<marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee> 

  

height 

设定活动字幕的高度 

代码如下: 

<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee> 

  

width 

设定活动字幕的宽度 

代码如下: 

<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee> 

  

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. 

代码如下: 

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee> 

  

loop 

设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1 

代码如下: 

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee> 

<p> </p> 

<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee> 

  

scrollamount 

设定活动字幕的滚动速度,单位pixels 

代码如下: 

<marquee scrollamount="10" >scrollamount="10" </marquee> 

<marquee scrollamount="20" >scrollamount="20" </marquee> 

<marquee scrollamount="30" >scrollamount="30" </marquee> 

scrolldelay 

设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒) 

值大了会有一步一停顿的效果 

代码如下: 

<marquee scrolldelay="10" >scrolldelay="10" </marquee> 

<marquee scrolldelay="100" > scrolldelay="100"</marquee> 

<marquee scrolldelay="1000">scrolldelay="1000" </marquee>



http://www.virplus.com/thread-23.htm
转载请注明:2019-1-22 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回