angularjs实现文字上下无缝滚动特效代码


Posted in Javascript onSeptember 04, 2016

最近没有项目做,于是闲暇之余学习了下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中定义了需要显示的文字,接下来我们就可以开始定义指令部分。

运行效果图:

angularjs实现文字上下无缝滚动特效代码

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

以上所述是小编给大家介绍的angularjs实现文字上下无缝滚动特效代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 #Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
jQuery简单实现中间浮窗效果
Sep 04 #Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
jQuery中ScrollTo用法示例
Sep 04 #Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
You might like
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
新店开张活动方案
2014/08/24 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
孝女彩金观后感
2015/06/10 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP