正文
AngularJS 指令 实现文本水平滚动效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<style>
.transverseRoll {
white-space: nowrap;
overflow: hidden;
width: 90%;
margin: 3px auto;
padding: 10px 20px 15px 0px;
position: fixed;
left: 5%;
color: white;
background-color: black;
z-index: 1;
}
</style>
<script>
var app = angular.module("myApp", []); app.directive("transverseRolling", function() {
return {
link: function(scope, element, attrs) {
//定义一个定时任务对象,用于鼠标悬停时取消滚动效果
var event; function scroll(obj) {
//获取滚动条到元素左边的距离
var tmp = (obj.scrollLeft) ++;
if (obj.scrollLeft == tmp) {
//当滚动条到达右边顶端时,将文字追加在元素末尾
obj.innerHTML += "    " + obj.innerHTML;
}
if (obj.scrollLeft >= obj.firstChild.offsetWidth) {
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
obj.scrollLeft = 0;
}
} function mouseover() {
//鼠标移入时取消滚动效果
clearInterval(event);
} function _scroll(param) {
//将滚动条位置向右移动一个像素,计算滚动条是否到达右侧尽头
return function() {
scroll(param);
};
} function _mouseout(target) {
//鼠标移出事件,设置滚动效果
return function() {
if (target) {
event = setInterval(_scroll(target), 100);
}
};
}
//将DOM对象转换为Jquery对象
var $target = $(element[0]);
// 设置滚动效果
event = setInterval(_scroll(element[0]), 100);
//给指令所在的div添加鼠标移入移出事件监听
element[0].addEventListener("mouseover", mouseover);
element[0].addEventListener("mouseout", _mouseout(element[0]));
}
}
});
</script>
</head><body ng-app="myApp">
<div class="transverseRoll" transverse-rolling>恨台上卿卿或台下我我，不是我跟你。俗尘渺渺天意茫茫，将你共我分开。断肠字点点风雨声连连，似是故人来。</div>
</body></html>
