<!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. 从哈希结构去理解PHP数组

    php的数组实际上就是hash_table,无论是 数字索引数组array(1, 2, 3) 还是关联数组array(1 => 2, 2=> 4)等等. 一,这里的hash_table有几 ...

  2. [sloved] IDE JavaServlet "Error: Could not find or load main class Servlet"

    [ sloved ] JavaServlet "Error: Could not find or load main class Servlet" 报错内容: 提供一份 Servl ...

  3. 获取Android状态栏的高度

    Android 开发中经常需要知道屏幕高度.宽度.状态栏,标题栏的高度等 宽度和高度 WindowManager windowManager = (WindowManager) getSystemSe ...

  4. 3.2、Factorization Machine实践

    1.在上一篇博客中我们构建度为二的因子分解机模型,这篇博客对这个模型进行实践 下图为准备的数据集: 完整代码为: # -*- coding: UTF-8 -*- # date:2018/6/6 # U ...

  5. 基础篇：3.1）规范化：3d草绘

    本章目的:3d草绘不同于cad工程图,但也有自己的规范要求.草绘要多多练习. 1.建模草图绘制 草图是大多数 3D 模型的基础.通常,创建模型的第一步是绘制草图,随后可以从草图生成特征.将一个或多个特 ...

  6. Go语言特殊函数介绍

    main 函数 Go语言程序的默认入口函数(主函数):func main()函数体用{}一对括号包裹.只能应用于package main func main(){ //函数体 } init 函数 go ...

  7. Visual Studio 2019 激活码

    Visual Studio 2019 Enterprise BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Professional NYWVH-HT ...

  8. js定时器执行

    第一种:问题请求代表执行打印出来的是什么? //定时器执行页面崩溃 var bo = true; setTimeout(function () { console.log("定时器执行&qu ...

  9. SD341X-SD343H管网法兰式伸缩蝶阀厂家，SD341X-SD343H管网法兰式伸缩蝶阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 SD341X-SD343H管网法兰式伸缩蝶阀 无极资讯网精心为您挑选了(SD341X-SD343H管网法兰式伸缩蝶阀)信息,其中包含了(SD3 ...

  10. how to run windows programs on a MAC?

    How to run windows programs on a MAC? We could use wine or Wine Bottler which is based on wine and p ...