Home > Developer > Web Develop
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition Al.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metacontent= "text/html; charset=utf-8"http-equiv= "Content-type" /> <Scriptsrc= "Https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></Script> <Scriptsrc= "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> varapp=Angular.module ("myApp", []); App.directive ("transverserolling", function() { return{link:function(scope, element, Attrs) {//defines a timed task object that cancels the scrolling effect when hovering over the mouse varevent; functionScroll (obj) {//gets the distance of the scrollbar to the left of the element vartmp=(Obj.scrollleft)++; if(Obj.scrollleft==tmp) { //appends text to the end of the element when the scroll bar reaches the top rightobj.innerhtml+= "    " +obj.innerhtml; } if(Obj.scrollleft>=obj.firstChild.offsetWidth) {//scroll bar back to leftmost when scroll bar scrolls the width of initial contentObj.scrollleft= 0; } } functionmouseover () {//Cancel scrolling effect when mouse is movedclearinterval (event); } function_scroll (param) {//moves the scrollbar position one pixel to the right and calculates whether the scrollbar reaches the right end return function() {scroll (param); }; } function_mouseout (target) {//mouse out event, set scrolling effect return function() { if(target) {event=setinterval (_scroll (target), -); } }; } //convert a DOM object to a jquery object var$target=$ (element[0]); //Set scrolling effectEvent=setinterval (_scroll (element[0]), -); //Add a mouse move-out event listener to the div where the instruction is placedelement[0].addeventlistener ("mouseover", mouseover); element[0].addeventlistener ("mouseout", _mouseout (element[0])); } } }); </Script></Head><BodyNg-app= "MYAPP"> <Divclass= "Transverseroll"transverse-rolling>Hate on the stage qingqing or under the table me, not me and you. Vulgar dust among insects providence boundless, will you together I separate. The word of the broken-hearted wind and rain repeatedly, seems to be the deceased.</Div></Body></HTML>
AngularJS instructions for text horizontal scrolling effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
