Announcement rolling display plug-in and announcement rolling plug-in

Announcement rolling display plug-in and announcement rolling plug-in

Announcement rolling display plug-in (written by jQuery plug-in)

Plug-in code:

/***** Announcement rolling display plug-in */(function ($) {$. fn. scrollNews = function (width) {if (this. find ("li "). length = 0) return; var ulWidth = 0; var currentMarginLeft = 0; var scrollStart = true; // initialize the div property this. parent (). width (width); this.parent().css ("overflow", "hidden"); // initialize the ul attribute this.css ("float", "left "); // initialize the li property var liMarginRight = 20; this. find ("li" ).css ("margin-right", liMarginRight. toString () + "px"); this. find ("li" ).css ("float", "right"); // initialize the ul width and the current margin-left this. find ("li "). each (function () {ulWidth + = $ (this ). width () + liMarginRight + 1 ;}); this. width (ulWidth); currentMarginLeft = width; this.css ("margin-left", currentMarginLeft); // The scrolling method defines var scroll = function (obj) {setInterval (function () {if (scrollStart) {obj.css ("margin-left", currentMarginLeft. toString () + "px"); currentMarginLeft-= 1; if (currentMarginLeft <-ulWidth) currentMarginLeft = width ;}, 50 );}; // display div this.parent().css ("visibility", "visible"); // call the scroll (this) method; this. mouseover (function () {scrollStart = false;}); this. mouseout (function () {scrollStart = true}) ;}}) ($ );View Code

Sample HTML code:

<Div style = "float: right; margin-right: 10px; margin-top: 5px; font-size: 15px; visibility: hidden; "> <ul id =" ulgg "> <! -- BEGIN noticeList --> <li> <a href = "# {noticeLink}"> <span style = "color: # ff0000;">★# {Notice. NoticeTitle} </span> </a> </li> <! -- END noticeList --> </ul> </div>View Code

Sample JS Code:

$ (Function () {$ ("# ulgg"). scrollNews (450 );});View Code