最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子，主要写了一个小小的指令。

css代码：主要控制样式

<style type="text/css">

        *{margin: 0px;padding: 0px;}

        .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}

        .slide li {height: 49px;line-height: 49px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}

        .slide li:hover{background: #ccc;}

    </style>

html代码：

<body ng-app="tip">

<div ng-controller = "TipController">

    <div class="slide">

        <ul class="slideUl">

            <!-- 指令 -->

            <slide-follow id="slide" dataset-data = "datasetData"></slide-follow>

        </ul>

    </div>

</div>

</body>

当然我们的代码都是基于页面中已经引入angular.js文件下来运行的

slide-follow是我们需要实现的指令   dataset-data = "datasetData" 是我们需要显示的文字

js代码
<script type="text/javascript">

    var app =angular.module("tip",[]);

    app.controller("TipController",function($scope){

        // 数据可以根据自己使用情况更换

        $scope.datasetData = [

            {option : "这个是第一条数据"},

            {option : "这个是第二条数据"},

            {option : "这个是第三条数据"},

            {option : "这个是第四条数据"},

            {option : "这个是第五条数据"},

            {option : "这个是第六条数据"}

        ]

    })

    .directive("slideFollow",function($timeout){

        return {

            restrict : 'E',

            replace : true,

            scope : {

                id : "@",

                datasetData : "="

            },

            template : "<li ng-repeat = 'data in datasetData'>{{data.option}}</li>",

            link : function(scope,elem,attrs) {

                $timeout(function(){

                    var className = $("." + $(elem).parent()[0].className);

                    var i = 0,sh;

                    var liLength = className.children("li").length;

                    var liHeight = className.children("li").height() + parseInt(className.children("li").css('border-bottom-width'));

                    className.html(className.html() + className.html());

                    // 开启定时器

                    sh = setInterval(slide,4000);

                    function slide(){

                        if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {

                            i++;

                            className.animate({

                                marginTop : -liHeight * i + "px"

                            },"slow");

                        } else {

                            i = 0;

                            className.css("margin-top","0px");

                        }

                    }

                    // 清除定时器

                    className.hover(function(){

                        clearInterval(sh);

                    },function(){

                        clearInterval(sh);

                        sh = setInterval(slide,4000);

                    })

                },0)

            }

        }

    })

</script>

首先我们在controller中定义了需要显示的文字，接下来我们就可以开始定义指令部分。

运行效果图：

文字上下会无缝滚动，当鼠标移入是，会清除定时器，停止滚动。

angular实现的文字上下无缝滚动的更多相关文章

  1. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  2. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

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

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

  4. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  5. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  6. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  7. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  8. vue 上实现无缝滚动播放文字系统公告

    首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定, ...

  9. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

随机推荐

  1. 分享一本书<<谁都不敢欺负你>>

    有些人,不管在工作还是生活上,总是被人欺负. 分享这本书给大家,能给大家带来正能量.你强大了,就没人敢欺负你. 有的时候,感到为什么倒霉的总是我?为什么我的命运是这样?为什么总欺负我? 也许有很多人会 ...

  2. LVS + keepalived(DR) 实战

    一.LVS体系结构 使用LVS架设的服务器集群系统有三个部分组成:最前端的负载均衡层,用Load Balancer表示,中间的服务器群组层,用Server Array表示,最底端的数据共享存储层,用S ...

  3. SIP DB33标准笔记 注册/目录发送/心跳

    SIP协议扩展中: 在 RFC 3261 基础上定义了一个新方法 DO.方法 DO 的功能包括:控制对方动作.更新对方信息.查询对方状态.历史监控资料查询和回放等.发送方法 DO 的请求报文时,不会创 ...

  4. CLR via C#中的一个多线程例子

    parallel的For和ForEach方法有一些重载版本允许传递三个委托 1.任务局部初始化委托(localInit),未参与工作的每一个任务都调用一次委托,在任务被要求处理前调用. 2.主体委托( ...

  5. Extjs6官方文档译文——应用架构简介（MVC，MVVM）

    应用架构简介 Extjs 同时提供对于MVC和MVVM应用架构的支持.这两个架构方式共享某些概念,而且都旨在沿着逻辑层面划分应用程序代码.每种方法在选择如何划分应用组件上都有其各自的优势. 本指南的目 ...

  6. Python之路- 反射&定制自己的数据类型

    一.isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 issubclass(sub, super)检查sub类是否是 super ...

  7. [系统启动]Printk与sched_clock_init的一点分析

     作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 在分析Linu内核启动的过程中,发现一段"不平常" ...

  8. 使用wcf编写坐标字符串生成shapefile文件，在iis发布供前端调用

    项目有一需求,需要由坐标字符串(格式:x,y,点名)生成shapefile,由于在前台开发类似功能比较麻烦而且也不适用,最终决定使用WCF来实现,不借助现有GIS软件,基于GDAL实现. 实现过程如下 ...

  9. Windows 10 碎片整理程序使用

    1.打开 此电脑 2.右击任意一个磁盘,这里以C盘为例,点击 属性 3.点击 工具  选项卡--->优化 4.选中其中的一个盘  优化 5.然后静等结束,就好啦. 虽然不知道有什么用,...

  10. 观察者模式（Observer）发布、订阅模式

    观察者模式定义了对象之间一对多的依赖关系,这样一来,当一个对象改变时,他的所有依赖者都会收到通知并自动更新.   模式中的角色 1.抽象主题(Subject):它把所有观察者对象的引用保存到一个聚集里 ...