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玩一玩WSH吧
Feb 23 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JavaScript DOM基础
Apr 13 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
js消除图片小游戏代码
Dec 11 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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的变量总结 新手推荐
2011/04/18 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP实现的json类实例
2015/07/28 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
js实现随机点名
2021/01/19 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python基于requests库爬取网站信息
2020/03/02 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
十佳大学生事迹材料
2014/01/29 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
出生证明格式
2015/06/15 职场文书
如何写通讯稿
2015/07/22 职场文书
关爱空巢老人感想
2015/08/11 职场文书
学习雷锋主题班会
2015/08/14 职场文书