最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

marquee.js插件演示9种jQuery滚动效果

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-02 10:01浏览(1524)

今天我们用marquee.js插件来演示多个滚动效果,并且兼容各大主流浏览器。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

分类:图片代码 > 图片滚动 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

演示一:不带任何参数(默认参数)

<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() {}
标签: 滚动marquee
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/93.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2