今天我们用marquee.js插件来演示多个滚动效果,并且兼容各大主流浏览器。
0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值
演示一:不带任何参数(默认参数)
<div id="wrap1" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
$(function() {
$('#wrap1').marquee();
})
演示三:自动滚动
<div id="wrap3" class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
$(function() {
$('#wrap3').marquee({
auto: true,
interval: 3000,
speed: 500,
showNum: 5,
stepLen: 5
});
})
其他7个滚动演示效果,点击查看。
参数 | 描述 | 默认值 |
auto | 是否自动滚动 | true |
interval | 间隔时间(毫秒) | 3000 |
direction | 向前 - forward / 向后 - backward | forward |
speed | 500 | 移动速度(毫秒) |
showNum | 显示个数 | 1 |
每次滚动步长 | stepLen | 1 |
type | 水平滚动 - horizontal / 垂直滚动 - vertical | horizontal |
prevElement | 上一组按钮元素 | - |
prevBefore | 上一组移动前回调 | function() {} |
nextElement | 下一组按钮元素 | function(){} |
nextBefore | 下一组移动前回调 | function() {} |
nextAfter | 下一组移动后回调 | function() {} |
pauseElement | 暂停按钮元素 | - |
pauseBefore | 暂停前回调 | function() {} |
pauseAfter | 暂停后回调 | function() {} |
resumeElement | 继续按钮元素 | - |
resumeBefore | 继续前回调 | function(){} |
resumeAfter | 继续后回调 | function() {} |
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群