<!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 指令 实现文本水平滚动效果的更多相关文章

  1. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  2. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  3. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

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

    很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...

  5. 用RecyclerView实现水平滚动和网格视图

    建立RecyclerViewActivity.java文件 1 public class RecyclerViewActivity extends AppCompatActivity { 2 priv ...

  6. 简易实现 TextView单行文本水平触摸滑动效果

    为了方便查看,已使用markdown编辑形成新博文. 本文Mardown地址 近期做应用的时候实用到TextView单行长文本,当文本内容过长时候又想实现触摸水平滑动效果. 网上找了非常多,都没有看到 ...

  7. 结构-行为-样式-angularJs 指令实现滚动文字

    最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...

  8. 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

随机推荐

  1. Java反射机制与工厂模式

    工厂模式属于创建型模式,它提供了一种创建对象的最佳方式. 它的特点是:客户端的程序类不直接牵扯到对象的实例化管理,只与接口发生关联,通过工厂类获取指定接口的实例化对象. 简单工厂模式如下: inter ...

  2. kali linux之免杀技术

    恶意软件: 病毒,木马.蠕虫,键盘记录,僵尸程序,流氓软件,勒索软件,广告程序 在用户非自愿的情况下安装 出于某种恶意的目的:控制,窃取,勒索,偷窥,推送,攻击 恶意程序最主要的防护手段:杀软 检测原 ...

  3. bzoj 4598: [Sdoi2016]模式字符串

    题目描述 给出n个结点的树结构T,其中每一个结点上有一个字符,这里我们所说的字符只考虑大写字母A到Z,再给出长度为m的模式串s,其中每一位仍然是A到z的大写字母. Alice希望知道,有多少对结点&l ...

  4. 恢复 MSSQL bak 文件扩展名数据（下）

    恢复 MSSQL bak 文件扩展名数据 一.概念: RESTORE Statements (Transact-SQL) Restores backups taken using the BACKUP ...

  5. 4 个快速的 Python 编译器 for 2018

    简评:Python 和其他的解释型语言一样经常被吐槽性能不行,所以开发人员为了提升性能创建了不少编译器,本文则选取其中的四个做了基准测试. Python 其实是一种相当快的语言,但它并不像编译型语言那 ...

  6. Python实现——二层BP神经网络

    2019/4/23更新 下文中的正确率极高是建立在仅有50组训练数据的基础上的,十分不可靠.建议使用提供的另一个生成训练集的generate_all函数,能产生所有可能结果,更加可靠. 2019/4/ ...

  7. P4173 残缺的字符串

    题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...

  8. 《Fixed Income Portfolio Analytics》阅读笔记——第零部分

    <Fixed Income Portfolio Analytics>第零部分的思维导图. <Fixed Income Portfolio Analytics>阅读笔记--第零部 ...

  9. linux入门 配置网络

    我因为有自己的ssr,因此想让虚拟机共享我的ssr,并且不想搞的太麻烦,特此记录一下 1. 获取本机的ip 在命令行里输入ipconfig /all 获取本机IP,如下图所示,我本机ip为10.3.7 ...

  10. python高级（五）—— python函数（一等对象）

    本文主要内容 一等对象 普通函数 & 高阶函数 可调用对象 & 自定义可调用类型 函数内省 函数注释 python高级——目录 文中代码均放在github上:https://githu ...