jQuery Message Scrolling

Add-ons

2026-07-25 23:09 4 次浏览 • 0 次下载 13.8KB

Plugin description: An extremely simple jQuery message scrolling plugin with clean and practical code.

Last updated: 2020-05-05 22:27:27

Changelog:The usage method has been restructured. The functionality remains unchanged, but it is now more convenient to use.

Usage instructions:

Include the JS and CSS files.

<link rel="stylesheet" type="text/css" href="./css/index.css"/>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>

$("#file0").Messageroll({
    limit: 3, // Number of messages to display. Default: 3
    cease: false, // Whether scrolling pauses when the mouse hovers over it. Default: false
    spend: 2000, // Interval time. Default: 2000
});

body：

<ul id="file0">
    <li>
        <img src="img/t1.png">
        <h3>This is the first message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
    <li>
        <img src="img/t2.png">
        <h3>This is the second message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
    <li>
        <img src="img/t3.png">
        <h3>This is the third message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
    <li>
        <img src="img/t4.png">
        <h3>This is the fourth message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
    <li>
        <img src="img/t5.png">
        <h3>This is the fifth message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
    <li>
        <img src="img/t3.png">
        <h3>This is the sixth message</h3>
        <p>Today is Wednesday and the weather is sunny</p>
    </li>
</ul>

Last updated: 2020-04-12 23:27:25

Uses a timer, prependTo, and the slideDown property. Although the implementation may look basic, the code is concise and the effect is clear and practical.