<!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. jQuery滚动到特定位置时出现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. P4093 [HEOI2016/TJOI2016]序列

    题目链接 题意分析 我们假设每一个数都有一个变动范围\([L_i,R_i]\) 那么我们令\(dp[i]\)表示以\(i\)结尾的最长不下降子序列的长度 那么就是\(dp[i]=max\{dp[j]+ ...

  3. ubuntu 安装python3

    1.安装python3 apt-get install python3 2.安装pip3 apt-get install python3-pip 3.为python3添加包 pip3 install ...

  4. Beautiful Soup解析网页

    使用前步骤: 1.Beautiful Soup目前已经被移植到bs4,所以导入Beautiful Soup时先安装bs4库. 2.安装lxml库:如果不使用此库,就会使用Python默认的解析器,而l ...

  5. Python全栈-magedu-2018-笔记12

    第三章 - Python 内置数据结构 字典dict key-value键值对的数据的集合 可变的.无序的.key不重复 字典dict定义 初始化 d = dict() 或者 d = {} dict( ...

  6. SAP生产订单各种日期的计算说明

    生产订单各种日期的计算说明 基本日期.已计划的.确认的日期,介绍一下这些日期的作用和计算方法: 首先我们来介绍一下基本日期: 基本开始日期:表示订单的开始日期 基本完成日期:表示订单的完成日期 我们在 ...

  7. Kafka：Consumer

    1.预览 1.1 消费者组(Consumer Group) 一个consumer group可能有若干个consumer实例 同一个group里面,topic的每条信息只能被发送到group下的一个c ...

  8. CentOS虚拟机断电或强制关机，再开机出现问题：Entering emergency mode. Exit the shell to continue.

    解决问题: 输入命令:xfs_repair -v -L /dev/dm-0

  9. tp5 重定向缺少index.php报错（No input file specified）

    转别人的,有用,Mark一下 public 下的.htaccess 修改为 <IfModule mod_rewrite.c>  Options +FollowSymlinks -Multi ...

  10. [Alpha]团队成员贡献分配规则

    设计参考 参考了往届团队sigma_rg.NewTeam.hotcode5.软剑攻城的四个评分规则后,希望该规则能队内减轻竞争的紧张气氛的同时,有具体的评分规则. 分配总则 基础分值固定为30分,将剩 ...