zoukankan html css js c++ java

前台特效（10）横向滚动字幕

<!-- longdd 2013.4.26 字幕横向滚屏-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>

        <style type="text/css">
            #ScrollWord{
                width: 1000px;
                height: 30px;
                border: solid 1px #000;
                margin: 20px auto;
                overflow: hidden;
            }
            #ScrollCont{
                width: 2000px;
                height: 30px;
            }
            #div1{
                float:left;
                width: 1000px;
                height: 30px;
                line-height: 30px;
            }
            #div2{
                float:left;
                width: 1000px;
                height: 30px;
                line-height: 30px;
            }
        </style>
        <script>
            $(function() {
                //复制div1内容到div2
                $("#div2").html($("#div1").html());

                //定时器
                var scroll = setInterval(scrolls, 150);
                //滚动函数
                function scrolls() {
                    if ($("#ScrollWord").scrollLeft() >= $("#div2").width()) {
                        $("#ScrollWord").scrollLeft($("#ScrollWord").scrollLeft() - $("#div1").width());
                    } else {
                        $("#ScrollWord").scrollLeft($("#ScrollWord").scrollLeft() + 5);
                    }
                }
                //鼠标悬停停止
                $("#ScrollWord").mouseover(function() {
                    clearInterval(scroll);
                });
                //鼠标离开继续
                $("#ScrollWord").mouseout(function() {
                    scroll = setInterval(scrolls, 150);
                });
            });
        </script>
    </head>
    <body>
        <div id="ScrollWord">
            <div id="ScrollCont">
                <div id="div1">
                    <span>我叫龙弟弟 我叫龙弟弟我叫龙弟弟我叫龙弟弟我叫龙弟弟 我叫龙弟弟end</span>
                </div>
                <div id="div2"></div>
            </div>
        </div>
    </body>
</html>

查看全文

相关阅读:
GCD HDU
Finding Lines UVALive
Chinese Mahjong UVA
DNA Evolution CodeForces
String Reconstruction （并查集）
Number Cutting Game HDU
Paint the Wall ZOJ
Star sky CodeForces
Haunted Graveyard ZOJ
GuGuFishtion HDU

原文地址：https://www.cnblogs.com/longdidi/p/3045209.html