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 相关文章推荐
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
JS中判断null的方法分析
Nov 21 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 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如何透过ODBC来存取数据库
2006/10/09 PHP
杏林同学录(一)
2006/10/09 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
ini_set的用法介绍
2014/01/07 PHP
php简单分页类实现方法
2015/02/26 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
党员学习十八大感想
2014/01/17 职场文书
后备干部培训方案
2014/05/22 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
自我推荐信格式模板
2015/03/24 职场文书
开天辟地观后感
2015/06/09 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
浅谈Redis的事件驱动模型
2022/05/30 Redis