登录注册

jquery消息滚动

插件特效
2026-07-25 23:09 3 次浏览 • 0 次下载 13.8KB
jquery消息滚动

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

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

使用方法如下：

引入js、css

1
2
3
<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

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

body：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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但很使用代码简洁，效果清晰

评论