JavaScript small example - ticker effect

We often see on the screen fonts rolling barrage as well as mobile phones and so on, as shown in the code is a simple ticker effect of the following:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        #wrap {
            width: 1000px;
            margin: 20px auto;
            border: 2px solid #51C9F1;
            white-space: nowrap;
            overflow: hidden;
            padding: 10px;
            color: gold;
            background: mediumpurple;
        } 

        #Wrap {div 
            the display: inline - Block; 
            font - size: 20px; 
        } 

        #wrap span { 
            font - size: 20px; 
            Color: Yellow; 
        }


     </ style> 
</ head> 
<body> 
<div ID = "wrap "> 
    <div the above mentioned id =" First "> 
        <span> Huachen Yu </ span> - no one provision, at what age we must do something, as long as you want, you can always, do not be too concerned about the opinions of others! 
    </ div> 
    <div ID = "Last"> 
        <span> Huachen Yu </ span> - That's why I said that lonely people are powerful, lonely people are not going to care about the outside world.         That is, you want something, you just say. But I was a premise that you say something it must be to establish 
        a good foundation. What to say when you can go about it, this after finish the sentence will not hurt him. but if

        Do you think to finish the sentence is to help this person, you can say. If you just rely on your own passionate, I now feel very unhappy, 
        I said it. But to finish the sentence is just plain hurt him, in fact, you have no difference with them. 
    </ div> 
</ div> 


<Script type = "text / JavaScript"> 

    ( function () {
         var wrap = document.getElementById ( 'wrap'), First = document.getElementById ( 'First'); // Get tag 
        var Timer = the window.setInterval (Move,. 5 ); 
        wrap.onmouseover = function () { 
            window.clearInterval (Timer); 
        }; 
        wrap.onmouseout = function () { 
            Timer = the window.setInterval (Move,. 5 ); 
        }; 
        function Move () {
            wrap.scrollLeft++;
            if (wrap.scrollLeft >= first.scrollWidth) {
                wrap.scrollLeft = 0;
            }
        }
    })();

</script>
</body>
</html>
JavaScript small example - ticker effect

Guess you like
