前台特效（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>

 

posted @ 2013-04-26 16:54  我叫龙弟弟  阅读(310)  评论(0)    收藏  举报