jquery消息滚动

 查看演示  website  立即下载

更新时间：2020-05-05 22:27:27

更新说明：将使用方法重新构建了一下，功能没有变，更加方便使用

使用方法如下：

引入js、css

<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>

js

$("#file0").Messageroll({
    limit: 3, //显示的消息条数  默认为3条
    cease: false, //鼠标悬浮是否停止默认为false
    spend: 2000, //时间，默认为2000
});

body：

<ul id="file0">
    <li>
        <img src="img/t1.png">
        <h3>这是第一条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
    <li>
        <img src="img/t2.png">
        <h3>这是第二条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
    <li>
        <img src="img/t3.png">
        <h3>这是第三条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
    <li>
        <img src="img/t4.png">
        <h3>这是第四条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
    <li>
        <img src="img/t5.png">
        <h3>这是第五条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
    <li>
        <img src="img/t3.png">
        <h3>这是第六条消息</h3>
        <p>今天心星期三天气晴</p>
    </li>
</ul>

更新时间：2020-04-12 23:27:25

用了定时器和prependTo，slideDown属性，看起来很low但很使用代码简洁，效果清晰

PREVIOUS:
NEXT:
纯CSS写腾讯云的框架菜单
jquery bootstraps响应式域名服务商网站模板