<!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. Sublime Text3 最新版3207 安装及破解

    注:原文地址 https://www.abbeyok.com/archives/337 Sublime Text 3最近更新了新版本,最新版本:3207,之前的license无效了,新版破解方法如下: ...

  2. 洛谷P5264 【模板】多项式三角函数

    题面 传送门 题解 据说有一个叫做欧拉公式的东西 \[e^{ix}=\cos(x)+i\sin(x)\] 别问我为啥我今天第一次看到它 那么显然也有 \[e^{-ix}=\cos(x)-i\sin(x ...

  3. HDU3183 贪心/RMQ-ST表

    A Magic Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  4. java类型与jdbc类型对应表

      java.sql.Types 值 Java 类型 IBM DB2 Oracle Sybase SQL Informix IBM Content Manager   BIGINT java.lang ...

  5. 27.Next Permutation（下一个字典序列）

    Level:   Medium 题目描述: Implement next permutation, which rearranges numbers into the lexicographicall ...

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

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

  7. 网络基础 01_OSI网际互联

    1 通信概述 网络是用物理链路将各个孤立的工作站或主机相连在一起,组成数据链路,从而达到资源共享和通信的目的. 通信是人与人之间通过某种媒体进行的信息交流与传递. 网络通信是通过网络将各个孤立的设备进 ...

  8. [HNOI2013]题解

    代码在最后 [HNOI2013]比赛 记忆化搜索 把每一位还需要多少分用\(27\)进制压进\(long\) \(long\),\(map\)记忆化一下即可 [HNOI2013]消毒 先考虑在二维平面 ...

  9. 洛谷 P2053 [SCOI2007]修车（最小费用最大流）

    题解 最小费用最大流 n和m是反着的 首先, \[ ans = \sum{cost[i][j]}*k \] 其中,\(k\)为它在当前技术人员那里,排倒数第\(k\)个修 我们可以对于每个技术人员进行 ...

  10. oracle12c之四 控制PDB操作 PDBLockdown Profiles

    除了IO.内存.CPU之外,还有一些限制,比如:限制在pdb中的操作命令,我们可以创建一个lockdown profile来限制对当前PDB的操作,增强某些操作的安全性.   关于PDB Lockdo ...