[JS] 改自网络：单行任意数量条公告循环滚动代码

来源：互联网发布：淘宝特种经营许可申请编辑：程序博客网时间：2024/06/06 13:07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title>JS新闻公告文字逐条向上翻滚代码</title>
    <styletype="text/css">
        #rollText {
            font: 12px /20px verdana;
        }
    </style>
</head>

<body>
    <divid="rollAD"style="height:20px; position:absolute; width:100%; margin:10px 0 0;overflow:hidden;">
        <imgstyle='width:20px;height:20px;padding:0 20px;'src="http://pic.qiantucdn.com/10/81/45/27bOOOPICc1.jpg!/fw/300/clip/0x400a0a0/format/webp">
        <divid="rollText"style="font-size:12px;line-height:20px;color:#666;">

            <a>第一条公告广告</a>
            <br />
            <a>第二条公告广告</a>
            <br />
            <a>第三条公告广告</a>
            <br />
        </div>
    </div>
    <scripttype="text/javascript">
        // <![CDATA[
        var textDiv =document.getElementById("rollText");
        var textList =textDiv.getElementsByTagName("a");
        if (textList.length >1) {
            var textDat = textDiv.innerHTML;
            var br = textDat.toLowerCase().indexOf("<br",3);
            //var textUp2 = textDat.substr(0,br);
            textDiv.innerHTML =textDat + textDat.substr(0,br);
            textDiv.style.cssText ="position:absolute;left:50px;right:50px;top:0;text-align:center;";
            var textDatH = textDiv.offsetHeight;MaxRoll();
        }
        else {
            textDiv.style.cssText ="position:absolute;left:50px;right:50px;top:0;text-align:center;";
        }
        var minTime,maxTime, divTop,newTop = 0;
        function MinRoll() {
            newTop++;
            if (newTop <=divTop + 20) {
                textDiv.style.top ="-" + newTop +"px";
            } else {
                clearInterval(minTime);
                maxTime = setTimeout(MaxRoll, 2000);
            }
        }
        function MaxRoll() {
            divTop = Math.abs(parseInt(textDiv.style.top));
            if (divTop >=0 && divTop <textDatH - 20) {
                minTime = setInterval(MinRoll, 1);
            } else {
                textDiv.style.top =0; divTop =0; newTop =0; MaxRoll();
            }
        }
// ]]>
    </script>
</body>

</html>
阅读全文
0 0