<!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. ajax使用向Spring MVC发送JSON数据出现 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported错误

    ajax使用向Spring MVC发送JSON数据时,后端Controller在接受JSON数据时报org.springframework.web.HttpMediaTypeNotSupportedE ...

  2. bzoj1800飞行棋

    题目链接 简单模拟 真的不敢相信ahoi09年的题竟然是这个难度 首先,一个必须要知道的定理是:圆上只有直径所对的圆周角是直角. 然后就很显然了, 只有两条不重合的直径上的四个点才能组成一个矩形, 所 ...

  3. sonar阻断级别错误（block）简单汇总

    1.代码里面包含PASSWORD.PWD 'PWD' detected in this expression, review this potentially hardcoded credential ...

  4. input 实现onchange效果

    $(".selected input").on('input',function(e){ cc.search(); });

  5. shell__常用命令__grep

    grep | zgrep (不用解压zip就能直接搜索) -i 不区分大小写 -I 忽略二进制文件 -R或r 递归文件目录 -c 计算找到的总数量 -n 显示行号 -v 显示不包含匹配文本的所有行 - ...

  6. Python多继承的C3算法

    C3算法 一.知识点补充: 拓扑排序:在图论中,拓扑排序(Topological Sorting) 是一个 有向无环图(DAG,Directed Acyclic Graph) 的所有顶点的线性序列.且 ...

  7. java里面的标识符、关键字和类型

    1. 注释  Java中有三种注释:   (1) // -单行注释,注释从“//”开始,终止于行尾:   (2)  -多行注释,注释从““结束:   (3)  -是Java特有的doc注释,这种注释主 ...

  8. Linux命令-关机命令:shutdown

    shutdown -h now 现在马上关机 shutdown -h : 晚上8:30定时关机shutdown -r now 现在马上重起shutdown -r 20:30 晚上8:30定时重起 ca ...

  9. BZOJ1688 Disease Manangement 疾病管理

    Disease Manangement 疾病管理   Description Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D ...

  10. 项目构建工具maven的使用方法

    最近在开发javaweb项目中有用到maven,以前并不是很了解,于是学习了一些相关内容,记之共享. 本篇内容在Windows环境下实施,JDK版本使用的1.7.0_79. 一.maven是什么? 简 ...