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

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_34163741

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/longdidi/archive/2013/04/26/3045209.html

版权

<!-- 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>

转载于:https://www.cnblogs.com/longdidi/archive/2013/04/26/3045209.html

weixin_34163741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前台特效（10）横向滚动字幕

<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; char...
复制链接

扫一扫