JQuery seamless rolling plug-in

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 });