最近在学习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. ios 关于时间戳与时间转化的笔记

    linux系统获取时间戳的方法:time() ; 时间戳转换成需要的时间格式: NSDateFormatter *formatter=[[NSDateFormatter alloc]init]; [f ...

  2. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  3. Mvc自定义验证

    假设我们书店需要录入一本书,为了简单的体现我们的自定义验证,我们的实体定义的非常简单,就两个属性,一个名称Name,一个出版社Publisher. public class BookInfo { pu ...

  4. Unity C#集合

    集合分为两种:非泛型集合,泛型集合. 非泛型集合需要引入:System.Collections命名空间,其命名空间下的类有: ArrayList表示大小根据需要动态增加的对象数组. Hashtable ...

  5. CF #April Fools Day Contest 2016 E Out of Controls

    题目连接:http://codeforces.com/problemset/problem/656/E 愚人节专场的E,整个其实就是个Floyd算法,但是要求代码中不能包含 definedoforfo ...

  6. 什么是PROFINET IO系统的实时性

    实时系统是指系统能及时响应外部事件的请求,在规定的时间内完成对该事件的处理,并控制所有实时任务协调一致的运行. PROFINET IO系统的实时性就是指当有一个外部事件发生时,从输入信号到传输.到控制 ...

  7. stl_组件

    2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...

  8. 关联分析：FP-Growth算法

    关联分析又称关联挖掘,就是在交易数据.关系数据或其他信息载体中,查找存在于项目集合或对象集合之间的频繁模式.关联.相关性或因果结构.关联分析的一个典型例子是购物篮分析.通过发现顾客放入购物篮中不同商品 ...

  9. css grid学习材料整理

    2017-04-18 19:59:02 由浅入深: 什么是网格布局:http://www.w3cplus.com/css3/what-is-css-grid-layout.html 浏览器如何开启网格 ...

  10. 运算符重载 与 sort()

    运算符重载与sort() 二话不说上代码: #include <iostream> #include <algorithm> using namespace std; stru ...