JavaScript编程交流 加入小组

20个成员 24个话题 创建时间:2015-09-15

JS从下往上滚动代码

发表于2017-06-12 750次查看

js如何制作从下方上滚动的方式,例如股市信息从下往上滚动。

效果图如下:

js从下往上滚动代码

代码如下:

<html>
<head>
    <title>滚动信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        body {
            font-size: 12px;
            background-color: #FFF;
            overflow: hidden;
        }

        td {
            font-size: 12px;
        }

        .titletd td {
            background-color: #EFEFEF;
            padding: 2px;
            text-align: center;
        }

        .datatd td {
            background-color: #FFFFFF;
            height: 18px;
            padding-left: 2px;
        }

        .td1 {
            width: 80px;
        }

        .td2 {
            width: 85px;
        }

        .td3 {
            width: 100px;
        }

        .td4 {
            width: 70px;
        }

        .td5 {
            width: 60px;
        }

        .td6 {
            width: 85px;
        }

        .td7 {
            width: 62px;
        }
    </style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
                <tr class="titletd">
                    <td nowrap class="td1">产品名称</td>
                    <td nowrap class="td2">规格</td>
                    <td nowrap class="td3">产地</td>
                    <td nowrap class="td4">价格</td>
                    <td nowrap class="td5">单位</td>
                    <td nowrap class="td6">企业名称</td>
                    <td nowrap class="td7">日期</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <div id="A1">
                <div id="A2">
                    <table width="550" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc"
                           style="margin-top:-1px;">
                        <tbody class="datatd">
                        <tr>
                            <td nowrap class="td1">白银</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">3,465</td>
                            <td nowrap class="td5">元/公斤</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">锑</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">47,000</td>
                            <td nowrap class="td5">元/公斤</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解锰</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">12,700</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">铜升水</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">600</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">铜升水</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">300</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解铜</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">68,490</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解铝</td>
                            <td nowrap class="td2">A00</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">19,540</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解铅</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">12,000</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解锌</td>
                            <td nowrap class="td2">0#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">29,650</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">电解锌</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">27,900</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">无氧铜丝</td>
                            <td nowrap class="td2">Φ3mm</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">69,400</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">镍</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">315,000</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">锡</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">78,000</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">钴</td>
                            <td nowrap class="td2">1#</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">400,000</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">漆包线</td>
                            <td nowrap class="td2">0.1-2.5mm</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">75,540</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">MB超细镍粉</td>
                            <td nowrap class="td2">150~1000</td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">550</td>
                            <td nowrap class="td5">元/公斤</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">砷铜合金</td>
                            <td nowrap class="td2"></td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">68,500</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-25</td>
                        </tr>
                        <tr>
                            <td nowrap class="td1">砷铜合金</td>
                            <td nowrap class="td2"></td>
                            <td nowrap class="td3">#</td>
                            <td nowrap class="td4" align="right">68,500</td>
                            <td nowrap class="td5">元/吨</td>
                            <td nowrap class="td6">长江现货</td>
                            <td nowrap class="td7">2006-8-24</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </td>
    </tr>
</table>
<script language=JavaScript>
    <!--
    function _InitScroll(_S1, _S2, _W, _H, _T) {
        return "var marqueesHeight" + _S1 + "=" + _H + ";var stopscroll" + _S1 + "=false;var scrollElem" + _S1 + "=document.getElementById('" + _S1 + "');with(scrollElem" + _S1 + "){style.width=" + _W + ";style.height=marqueesHeight" + _S1 + ";style.overflow='hidden';noWrap=true;}scrollElem" + _S1 + ".onmouseover=new Function('stopscroll" + _S1 + "=true');scrollElem" + _S1 + ".onmouseout=new Function('stopscroll" + _S1 + "=false');var preTop" + _S1 + "=0; var currentTop" + _S1 + "=0; var stoptime" + _S1 + "=0;var leftElem" + _S2 + "=document.getElementById('" + _S2 + "');scrollElem" + _S1 + ".appendChild(leftElem" + _S2 + ".cloneNode(true));setTimeout('init_srolltext" + _S1 + "()'," + _T + ");function init_srolltext" + _S1 + "(){scrollElem" + _S1 + ".scrollTop=0;setInterval('scrollUp" + _S1 + "()',50);}function scrollUp" + _S1 + "(){if(stopscroll" + _S1 + "){return;}currentTop" + _S1 + "+=1;if(currentTop" + _S1 + "==(marqueesHeight" + _S1 + "+1)) {stoptime" + _S1 + "+=1;currentTop" + _S1 + "-=1;if(stoptime" + _S1 + "==" + _T / 50 + ") {currentTop" + _S1 + "=0;stoptime" + _S1 + "=0;}}else{preTop" + _S1 + "=scrollElem" + _S1 + ".scrollTop;scrollElem" + _S1 + ".scrollTop +=1;if(preTop" + _S1 + "==scrollElem" + _S1 + ".scrollTop){scrollElem" + _S1 + ".scrollTop=0;scrollElem" + _S1 + ".scrollTop +=1;}}}";
    }
    eval(_InitScroll("A1", "A2", 550, 19 *8, 3000));
    /*
     A1,A2或B1,B2是滚动内容区域外的两个DIV的ID
     如
     <div id="B1">
     <div id="B2">
     _W为滚动内容的宽度
     _H为滚动内容的高度,必须为单元格高度的整数倍,这里每个单元格是19px高
     _T为滚动后每次停留言时间
     2006-8-25
     */
    //-->
</script>
</body>
</html>

我学院网推荐学习:javascript 从定义到执行,你不知道的那些事

发表回复
你还没有登录,请先 登录或 注册!