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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
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
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python中url标签使用知识点总结
2020/01/16 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
导游个人求职信范文
2014/03/23 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
详解python网络进程
2021/06/15 Python
Go获取两个时区的时间差
2022/04/20 Golang