最近在学习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. Log4j配置文件内容详解

    .Log4j的优点 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送地:我们也可以控制每一条日志的输出格式:通过定义每一条日志信息的级别,我们能够更加细致地控 ...

  2. 【从无到有】JavaScript新手教程——2.分支结构和循环

    介绍完JS的简介和向量以及运算符,大家对JS也有了初步的了解和认识,今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的 [JS中的分支结构] 一.[if-else结构] 1.结构写法: i ...

  3. 京东笔试---通过考试（DP）

    题目描述      小明同学要参加一场考试,考试一共有n道题目,小明必须作对至少60%的题目才能通过考试.考试结束后,小明估算出每题作对的概率,p1,p2,...,pn,你能帮他算出他通过考试的概率吗 ...

  4. Redisson入门

    Redisson入门 Author:Ricky  Date:2017-04-24 Redisson概述 Redisson是架设在Redis基础上的一个Java驻内存数据网格(In-Memory Dat ...

  5. Jquery遍历数组之$().each()方法和$.each()方法

    前几天面试碰到了一个笔试问题:用jquery变了数组. 总结一下用jquery遍历数组的两种方法: 一.$().each()方法 <head><meta http-equiv=&qu ...

  6. 蓝桥杯- 移动距离-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  7. Openstack Swift 原理、架构与 API 介绍

    OpenStack Swift 开源项目提供了弹性可伸缩.高可用的分布式对象存储服务,适合存储大规模非结构化数据.本文将深入介绍 Swift 的基本设计原理.对称式的系统架构和 RESTful API ...

  8. windows下配置mysql数据库主从

    所用到工具: Mysql.Navicat Premium: 主库设置: 一．设置my.ini 文件: 1.在安装目录下找到my.ini 文件: 默认路径:C:\Program Files\MySQL\ ...

  9. SOM网络聚类完整示例（利用python和java）

    下面是几个城市的GDP等信息,根据这些信息,写一个SOM网络,使之对下面城市进行聚类.并且,将结果画在一个二维平面上. //表1中,X.为人均GDP(元):X2为工业总产值(亿元):X.为社会消费品零 ...

  10. HDU4712 Hamming Distance (随机化)

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4712 题意:给1e5个数字,输出这些数中,最小的海明码距离. 思路:距离的范围是0到20.而且每个数的 ...