Plug-in code
; (Function ($) {// jQuery marquee plugin $. fn. marquee = function (options) {// default value: var defaults = {derection: "top", interval: 50}; // var options = $. extend (defaults, options); var $ mar = $ (this), original = $ mar. children (). first (), clone = original. clone (), height = original. height (), width = original. width (), I = 0, tId = null; // unique tId, which can be cleared by clearTimeout (tId) // append clone to marquee $ mar. append (clone); // scrolltop var scrolltop = function () {if (I Example 1: Scroll up (default)
<! -- Html code --> <div class = "marquee"> <ul> <li> scroll bar teenagers </li> <li> scroll bar teenagers la </li> <li> scroll bar teenagers ba Nian </li> </ul> </div>
/* css code */.marquee{ border:1px solid #0a0; width:300px; height:100px; overflow:hidden;}.marquee li{ font-size:16px; line-height:1.5;}
// Js code: plug-in application $ (". marquee"). marquee ();
Example 2: Left scroll
<! -- Html code --> <div class = "marquee2"> <ul> <li> scroll bar teenagers </li> <li> scroll bar teenagers la </li> <li> scroll bar teenagers ba Nian </li> </ul> </div>
/* Css code */. marquee2 {width: 300px; height: 25px; border: 1px solid # 00a; overflow: hidden; white-space: nowrap;/* When the text exceeds the limit, no line breaks are generated !! */}. Marquee2 ul,. marquee2 li {display: inline; font-size: 16px; line-height: 25px ;}
// Js code: plug-in application $ (". marquee2"). marquee ({derection: "left", interval: 25 });