最近在学习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. Map和Set

    JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number ...

  2. 在SQL Server中用好模糊查询指令LIKE

    简介:like在sql中的使用 在SQL Server中用好模糊查询指令LIKE 查询是SQL Server中重要的功能,而在查询中将Like用上,可以搜索到一些意想不到的结果和效果,like的神奇之 ...

  3. angular双向数据绑定

    <body ng-app> //三个view都会变 <input type="text" ng-model="name" value=&quo ...

  4. 浅析JS中的模块规范AMD和CMD

    一.AMD AMD就只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样: d ...

  5. 【外文翻译】 为什么我要写 getters 和setters

    原文作者: Shamik Mitra 原文链接:https://dzone.com/articles/why-should-i-write-getters-and-setters 当我开始我的java ...

  6. 简谈-如何使用Python和R组合完成任务

    概述 和那些数据科学比赛不同,在真实的数据科学中,我们可能更多的时间不是在做算法的开发,而是对需求的定义和数据的治理.所以,如何更好的结合现实业务,让数据真正产生价值成了一个更有意义的话题. 数据科学 ...

  7. 京东商城首页jquery轮播特效

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  8. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. Laravel 5.2 教程 - 文件上传

    一.简介 Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包. Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空 ...

  10. Java基础语法(一)<注释，关键字，常量，变量，数据类型，标识符，数据类型转换>

    从今天开始,记录学习Java的过程.要学习Java首先得有环境,至于环境的安装我就不说了,百度有很多教程,比如:http://jingyan.baidu.com/article/20095761904 ...