最近在学习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. javascript中的几种遍历方法浅析

    1. for...in 用于对数组或者对象的属性的可枚举属性进行循环操作.注意该对象来自原型链上的可枚举属性也会被循环.下面看例子 var arr = ["lee","h ...

  2. [Android]Gradle 插件 DiscardFilePlugin（class注入&清空类和方法）

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6732128.html Android Gradle 插件 Di ...

  3. 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

    在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...

  4. 关于Java中Arrays.sort()方法TLE

    最近一直在练用Java写题,今天无意发现一道很简单的二分题(链接),我一开始是直接开int[]数组调用Arrays.sort()去排序,没想到TLE了,原来是因为jdk中对于int[]的排序是使用快速 ...

  5. CSAcademy Beta Round #4 Swap Pairing

    题目链接:https://csacademy.com/contest/arhiva/#task/swap_pairing/ 大意是给2*n个包含n种数字,每种数字出现恰好2次的数列,每一步操作可以交换 ...

  6. mybatisPeizhixml文件的层次结构

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC & ...

  7. httpd: Could not reliably determine the server's fully qualified domain name

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 问题描述: AH00558: httpd: Could not reliab ...

  8. Github－－账号重新申请与配置

    2017-04-24 最近洗心革面痛下决心要好好再深入学习一番前端,正好加入了一个外包团队接了份单子,外包项目正在如火如荼地进行着,自己也打算趁这个机会来好好学习总结一番. 但是俗话说得好," ...

  9. poj1159二维树状数组

    Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...

  10. java之对数组排序

    一.在运行时输入数组 import java.util.*; //也可以写成  import java.util.Scanner; public class px { public static vo ...