JQuery + css announcement scroll from left to right, jquerycss

JQuery + css announcement scroll from left to right, jquerycss

$ (Function () {// rolling announcement $ (". notice-content "). textScroll () ;});/*** scroll the text from right to left * @ returns {undefined} */$. fn. textScroll = function () {// scroll step (the larger the step size, the faster the speed) var step_len = 60; var this_obj = $ (this); var child = this_obj.children (); var this_width = this_obj.width (); var child_width = child. width (); var continue_speed = undefined; // restore the animation speed after the pause // The initial text position child.css ({left: this_width}); // The initial animation speed. speed var in It_speed = (child_width + this_width)/step_len * 1000; // rolling animation function scroll_run (continue_speed) {var speed = (continue_speed = undefined? Init_speed: continue_speed); child. animate ({left:-child_width}, speed, "linear", function () {detail (this).css ({left: this_width}); scroll_run ();});} // Mouse Action child. on ({mouseenter: function () {var current_left = $ (this ). position (). left; $ (this ). stop (); continue_speed = (-child_width-current_left)/step_len) * 1000 ;}, mouseleave: function () {scroll_run (continue_speed ); continue_speed = undefined ;}}); // start scroll_run ();};

　　

<Div class = "notice-title"> announcement: </div> <div class = "notice-content"> <div class = "notice-text"> <span> announcement content </span> </div>

　　

. Notice-title {color: # fff ;}. notice-content {position: relative; width: 800px; height: 30px; white-space: nowrap; overflow: hidden; float: left; margin-left: 55px; margin-top: -30px;/* background transparency background-color: # fff; filter: alpha (opacity = 10);-moz-opacity: 0.5;-khtml-opacity: 0.5; opacity: 0.5 ;*/}. notice-text {color: red; font-size: 14px; position: absolute ;}