<marquee>通知滚动

        页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。
重要属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
　　语法：<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
　　语法：<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
　　语法：<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
　　语法：<marquee scrolldelay="100">...</marquee>
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
　　语法：<marquee loop="2">...</marquee>
6.滚动范围width、height
7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

实例：

HTML:

<span style="font-size:18px;"><!--通知begin-->
            <div class="notice-ul bottom-height">
                <h1 class="bg-gre">通知</h1>
                <div style=" margin-left:15px; margin-top:5px;margin-right:10px;">
                    <div id="gudingnotice" style="height:300px;text-align:left;">
                        <p style=" text-align:center; font-size:25px;">通知信息加载中......</p>
                    </div>
                    <div id="gundongnotice" style="height:300px;text-align:left;display:none; overflow:hidden;">
                    </div>
                </div>
            </div>
            <!--通知end--></span>

JS:

<span style="font-size:18px;">$(document).ready(function () {
            setInterval("startNotice()", 1000 * 60);
        });
        function startNotice() {
            $.ajax({
                url: "ashx/Notice.ashx?ip="+ip,
                dataType: "Json",
                success: function (data) {
                    //新的通知
                    var newnotice = data.noticenews.toString();
                    //当前显示的通知
                    var oldenotice = $("#txtnotices").val();
                    if (oldenotice != newnotice) {
                        document.getElementById('txtnotices').value = newnotice;
                        var count = newnotice.length;
                        if (count <= 180) {
                            $("#gudingnotice").css({ "display": "" });
                            $("#gundongnotice").css({ "display": "none" });
                            document.getElementById("gudingnotice").innerHTML = "<p style='width:100%; height:290px;font-size:25px;'>" + newnotice + "</p>";
                        }
                        else {
                            $("#gudingnotice").css({ "display": "none" });
                            $("#gundongnotice").css({ "display": "" });
                            document.getElementById("gundongnotice").innerHTML = "<marquee direction='up' height='300'  loop='-1' style='text-align:left;' scrollamount='1' behavior='scroll'><p style='font-size:25px;'>" + newnotice + "</p> </marquee>";
                        }
                    }

                },
                error: function (errorThrown) {
                    // alert("error");
                }
            });
        }</span>

        实现非常简单，而且挺实用的。