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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
对javascript继承的理解
Oct 11 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 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
深入PHP中的HashTable结构详解
2013/06/13 PHP
php解析url的三个示例
2014/01/20 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
angular分页指令操作
2017/01/09 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Javascript继承机制详解
2017/05/30 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
深入理解Webpack 中路径的配置
2017/06/17 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python实现App自动签到领取积分功能
2018/09/29 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
小学毕业感言50字
2014/02/16 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
励志演讲稿800字
2014/08/21 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
导游词之凤凰古城
2019/10/22 职场文书