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 相关文章推荐
JS中style属性
Oct 11 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
安全检查管理制度
2014/02/02 职场文书
小学毕业感言150字
2014/02/05 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
营销与策划实训报告
2014/11/05 职场文书
公司员工安全协议书
2014/11/21 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js