jquery文字上下滚动

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

分类：文字特效 > 文字滚动难易：初级

查看演示下载资源下载积分： 20 积分

文章滚动ul列表

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