<!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>AngularJS 指令 实现文本水平滚动效果
原文地址：https://www.cnblogs.com/qiushuiblog/p/8375833.html