jQuery.textSlider.js

;(function($) {

    $.fn.textSlider = function(settings) {

        settings = jQuery.extend({

            speed: "normal",

            line: 2,

            timer: 1000

        }, settings);

        return this.each(function() {

            $.fn.textSlider.scllor($(this), settings);

        });

    };

    $.fn.textSlider.scllor = function($this, settings) {

        var ul = $("ul:eq(0)", $this);

        var timerID;

        var li = ul.children();

        var _btnUp = $(".up:eq(0)", $this);

        var _btnDown = $(".down:eq(0)", $this);

        var liHight = $(li[0]).height();

        var upHeight = 0 - settings.line * liHight;

        var scrollUp = function() {

            _btnUp.unbind("click", scrollUp);

            ul.animate({marginTop: upHeight}, settings.speed, function() {

                for (i = 0; i < settings.line; i++) {

                     ul.find("li:first").appendTo(ul);

                }

                ul.css({marginTop: 0});

                _btnUp.bind("click", scrollUp);

            });

        };

        var scrollDown = function() {

            _btnDown.unbind("click", scrollDown);

            ul.css({marginTop: upHeight});

            for (i = 0; i < settings.line; i++) {

                ul.find("li:last").prependTo(ul);

            }

            ul.animate({marginTop: 0}, settings.speed, function() {

                _btnDown.bind("click", scrollDown);

            });

        };

        var autoPlay = function() {

            timerID = window.setInterval(scrollUp, settings.timer);

        };

        var autoStop = function() {

            window.clearInterval(timerID);

        };

        ul.hover(autoStop, autoPlay).mouseout();

        _btnUp.css("cursor", "pointer").click(scrollUp);

        _btnUp.hover(autoStop, autoPlay);

        _btnDown.css("cursor","pointer").click(scrollDown);

        _btnDown.hover(autoStop, autoPlay);

    };

})(jQuery);

demo.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        .scrollText{width:300px;height:100px;overflow:hidden;border:#ccc 1px solid;line-height:25px;}

        .up{width:50px;height:50px;background:#f90;cursor:pointer;}

        .down{width:50px;height:50px;background:#960;cursor:pointer;}

    </style>

    <script src="jquery-1.5.2.min.js"></script>

    <script src="jQuery.textSlider.js"></script>

</head>

<body>

    <p>一行滚动演示：</p>

    <div id="scrollDiv">

        <div class="scrollText">

            <ul>

                <li>这是公告标题的第一行</li>

                <li>这是公告标题的第二行</li>

                <li>这是公告标题的第三行</li>

                <li>这是公告标题的第四行</li>

                <li>这是公告标题的第五行</li>

                <li>这是公告标题的第六行</li>

                <li>这是公告标题的第七行</li>

                <li>这是公告标题的第八行</li>

                <li>这是公告标题的第9行</li>

                <li>这是公告标题的第10行</li>

                <li>这是公告标题的第11行</li>

                <li>这是公告标题的第12行</li>

            </ul>

        </div>

        <div class="up">up</div>

        <div class="down">down</div>

    </div>

    <p>多行滚动演示：</p>

    <div id="scrollDiv2">

        <div class="scrollText">

            <ul>

                <li>这是公告标题的第一行</li>

                <li>这是公告标题的第二行</li>

                <li>这是公告标题的第三行</li>

                <li>这是公告标题的第四行</li>

                <li>这是公告标题的第五行</li>

                <li>这是公告标题的第六行</li>

                <li>这是公告标题的第七行</li>

                <li>这是公告标题的第八行</li>

                <li>这是公告标题的第9行</li>

                <li>这是公告标题的第10行</li>

                <li>这是公告标题的第11行</li>

                <li>这是公告标题的第12行</li>

            </ul>

        </div>

        <div class="up">up</div>

        <div class="down">down</div>

    </div>

    <script>

        $(document).ready(function() {

            $("#scrollDiv").textSlider({line: 1, speed: 500, timer: 3000});

            $("#scrollDiv2").textSlider({line: 2, speed: 500, timer: 3000});

        });

    </script>

</body>

</html>

-_-#【jQuery插件】textSlider 文本滚动的更多相关文章

  1. 自己编写jQuery插件 之 无缝滚动

    一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...

  2. jQuery高性能自己定义滚动栏美化插件

    malihu是一款高性能的滚动栏美化jQuery插件. 该滚动栏美化插件支持水平和垂直滚动栏,支持鼠标滚动,支持键盘滚动和支持移动触摸屏. 而且它能够和jQuery UI和Bootatrap完美的结合 ...

  3. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  4. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  5. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  8. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  9. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

随机推荐

  1. switch-case参数类型

    switch语句用法: 0. switch语句由一个控制表达式和多个case标签组成 1. switch控制表达式支持的类型有byte.short.char.int.enum(JDK5).String ...

  2. CentOS 6.4 编译 Hadoop 2.5.1

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/4058956.html ...

  3. mxnet运行时遇到问题及解决方法

    1.训练好模型之后,进行预测时出现这种错误: mxnet.::] src/ndarray/ndarray.cc:: Check failed: ,) to.shape=(,) 这种问题的解决方法,在全 ...

  4. ASP.NET中如何生成图形验证码

    通常生成一个图形验证码主要 有3个步骤: (1)随机产生一个长度为N的随机字符串,N的值可由开发可由开发人员自行设置.该字符串可以包含数字.字母等. (2)将随机生成的字符串创建成图片,并显示. (3 ...

  5. java 引用资源-ClassLoader.getResource()方法

    如图,eclipse中我的包结构为:,我在 spt.app.MainFrame 中可以通过一下代码段使用资源: public static Object obj = ImageIconProxy.cl ...

  6. 利用ASP.NET AJAX的Timer讓GridView每隔一段時間做到自動換頁的功能

    最近在討論區看到這個問題,小弟利用asp.net ajax的timer來實作這個功能 利用timer每隔一段時間,讓gridview自動跳頁並且更新gridview的內容 asp.net(c#) Gr ...

  7. 安卓开发service

    如果把Activity比喻为前台程序,那么service可以看做是一个后台程序.Service跟Activity一样也由Intent调用. 在工程里想要添加一个Service,先新建继承Service ...

  8. VisualStudio2013内置SQLServer入门

    最近做项目老大要求用到sqlserver,但是这项目的数据库只是本地演示用并不复杂,于是决定试试VisualStudio2013内置的SQLServer.对于这个东西的了解并没有多少,然后项目初学习的 ...

  9. SGU 149. Computer Network

    时间限制:0.25s 空间限制:4M: 题意: 给出一颗n(n<=10000)个节点的树,和n-1条边的长度.求出这棵树每个节点到最远节点的距离: Solution: 对于一个节点,我们可以用D ...

  10. gSoap实现ONVIF中xsd__anyType到具体结构类型的转换

    上一篇文章已经粗略计划要讨论gsoap关于序列化/解析编程. 本文则阐述一下关于gsoap生成代码的一些重要特征方法及使用.如题,下我们从ONVIF生成的C码中,挑选简单的一个类型来试验一下与xsd_ ...