您的位置:首页 > 理论基础 > 计算机网络

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

2017-12-02 01:21 666 查看
<!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>
    <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8" />
    <title>JS新闻公告文字逐条向上翻滚代码</title>
    <style
type="text/css">
        #rollText {
            font:
12px /20px
verdana;
        }
    </style>
</head>

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

            <a>第一条公告广告</a>
            <br />
            <a>第二条公告广告</a>
            <br />
            <a>第三条公告广告</a>
            <br />
        </div>
    </div>
    <script
type="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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: