How to Implement the running lantern effect applied by ionic in homepage news

How to Implement the running lantern effect applied by ionic in homepage news

In the app, there are often applications that use the rolling headlight effect:

 

The Code is as follows:

Html:

<Div class = "shouRight"> <ul class = "slideTopbox" slide-scroll style = "top: 0px; "> <li> <a href =" # "rel =" external nofollow "> 1. rows 1st </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow"> 2. rows 2nd </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow"> 3. rows 3rd </a> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow"> 4. row 4th </a> </li> </ul> </div>

Css:

.slideTopbox { width: 100%; z-index: 99; position: absolute; top: 0; color: #000;}.shouRight { width: 100%; z-index: 9999; position: absolute; top: 0; height: 30px; color: #000; overflow: hidden; line-height: 30px;}

Js:

Angular. module ('Starter. services ', []). directive ('slidescroll ', function ($ window, $ timeout) {return {restrict:' AE ', link: function (scope, element, attr) {var itsWatch = scope. $ watch ("its", function (newvalue, oldvalue) {itsWatch (); var I = 1; // element is ul var length = element [0]. children. length; var widthwindow = $ window. innerWidth-20; var firstwidth = element [0]. children [0]. children [0]. offsetWidth; setInterval (function () {if (I = length) {I = 0; // initial position element [0]. style. top = "0px";} var topscorll =-(I * 30); var widthself = element [0]. children [I]. children [0]. offsetWidth; // widthself: 292 feeltoTop (topscorll) I ++;}, 3000) // scroll up function feeltoTop (topscorll) {// console. log (topscorll): topscorll is the top value var buchang =-10; var feelTimer = setInterval (function () {element [0]. style. top = parseInt (element [0]. style. top) + buchang + "px"; if (parseInt (element [0]. style. top) <= topscorll) {element [0]. style. top = topscorll + "px"; window. clearInterval (feelTimer) ;}}, 100 );}})}}})

Effect:

The above section describes how to implement the running lantern effect applied by ionic in homepage news. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!