AngularJS 指令 实现文本水平滚动效果

Posted 秋水_cnblogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS 指令 实现文本水平滚动效果相关的知识，希望对你有一定的参考价值。

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <style>
        .transverseRoll {
            white-space: nowrap;
            overflow: hidden;
            width: 90%;
            margin: 3px auto;
            padding: 10px 20px 15px 0px;
            position: fixed;
            left: 5%;
            color: white;
            background-color: black;
            z-index: 1;
        }
    </style>
    <script>
        var app = angular.module("myApp", []);

        app.directive("transverseRolling", function() {
            return {
                link: function(scope, element, attrs) {
                    //定义一个定时任务对象,用于鼠标悬停时取消滚动效果
                    var event;

                    function scroll(obj) {
                        //获取滚动条到元素左边的距离
                        var tmp = (obj.scrollLeft) ++;
                        if (obj.scrollLeft == tmp) {
                            //当滚动条到达右边顶端时,将文字追加在元素末尾
                            obj.innerHTML += "&nbsp&nbsp&nbsp&nbsp" + obj.innerHTML;
                        }
                        if (obj.scrollLeft >= obj.firstChild.offsetWidth) {
                            //当滚动条滚动了初始内容的宽度时滚动条回到最左端
                            obj.scrollLeft = 0;
                        }
                    }

                    function mouseover() {
                        //鼠标移入时取消滚动效果
                        clearInterval(event);
                    }

                    function _scroll(param) {
                        //将滚动条位置向右移动一个像素,计算滚动条是否到达右侧尽头
                        return function() {
                            scroll(param);
                        };
                    }

                    function _mouseout(target) {
                        //鼠标移出事件,设置滚动效果
                        return function() {
                            if (target) {
                                event = setInterval(_scroll(target), 100);
                            }
                        };
                    }
                    //将DOM对象转换为Jquery对象
                    var $target = $(element[0]);
                    // 设置滚动效果
                    event = setInterval(_scroll(element[0]), 100);
                    //给指令所在的div添加鼠标移入移出事件监听
                    element[0].addEventListener("mouseover", mouseover);
                    element[0].addEventListener("mouseout", _mouseout(element[0]));
                }
            }
        });
    </script>
</head>

<body ng-app="myApp">
    <div class="transverseRoll" transverse-rolling>恨台上卿卿或台下我我，不是我跟你。俗尘渺渺天意茫茫，将你共我分开。断肠字点点风雨声连连，似是故人来。</div>
</body>

</html>

 

以上是关于AngularJS 指令 实现文本水平滚动效果的主要内容，如果未能解决你的问题，请参考以下文章

有没有更好的方法来实现模拟有限字符显示的水平滚动文本效果？

AngularJS 指令 DOM 操作不起作用

IOS UIScrollView + UIButton 实现页面和顶部标签页水平滚动效果

AngularJS - 指令渲染完成后如何查询 DOM

IOS实现文字水平无间断滚动

IOS跑马灯效果，实现文字水平无间断滚动