jquery文字上下滚动

收藏

本文介绍了两种不同的滚动方式，第一种演示是自己写的简单的滚动，第二、三种引入了滚动插件。

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

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

文章滚动ul列表

<div class="scrollDiv" id="s1">
    <ul>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 图片切换 switchable 带左右按钮控制分页索引图片切换
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图
            </a>
        </li>
        <li>
            <a href="http://www.erdangjiade.com/">
                jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放
            </a>
        </li>
    </ul>
</div>

演示一：单行滚动（不使用插件定时自动滚动）

function AutoScroll(obj) {
    $(obj).find("ul:first").animate({
        marginTop: "-25px"
    },
    500,
    function() {
        $(this).css({
            marginTop: "0px"
        }).find("li:first").appendTo(this);
    });
}
setInterval('AutoScroll("#s1")', 3000);

后面两种滚动效果，须引入滚动插件

<script type="text/javascript" src="scroll.js"></script>

演示二：多行滚动

$("#s2").Scroll({line: 4, speed: 500, timer: 4000});

可控制向前向后的多行滚动

$("#s3").Scroll({line: 4, speed: 500, timer: 2000, up: "btn1", down: "btn2"});