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. PhalGo-介绍

    PhalGo-介绍 phalgo是一个Go语言的一体化开发框架,主要用于API开发应为使用ECHO框架作为http服务web程序一样可以使用,牛顿曾经说过"如果我比别人看得远,那是因为我站在 ...

  2. GET和POST本质上有什么区别

    如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用. 这个答案好像并不是他想要的.于是他继 ...

  3. codevs1506传话（kosaraju算法）

    - - - - - - - - 一个()打成[] 看了一晚上..... /* 求强连通分量 kosaraju算法 边表存图 正反构造两个图 跑两边 分别记下入栈顺序 和每个强连通分量的具体信息 */ ...

  4. C# 自定义控件制作和使用实例（winform）

    C# 自定义用户控件 此处为转载文章,用于记录自我学习过程,原文链接地址http://blog.csdn.net/xiongxuanwen/article/details/2605109 上篇:控件制 ...

  5. java 钱币的单位转换

    将钱转成转换为带指定单位的钱 int money = 10; NumberFormat nf = NumberFormat.getCurrencyInstance(Locale.US); System ...

  6. CentOS 5.4下的Memcache安装步骤(Linux+Nginx+PHP+Memcached)

    原文链接:http://www.jb51.net/article/29668.htm

  7. angularjs ngTable -Custom filter template-calendar

    jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...

  8. 解决c#处理excel时故障 找不到可安装的 isam

    直接拷贝的以前代码,但因软件版本,系统环境的变化,导致提示“找不到可安装的 isam”. 我目前新的软件环境:win8.1+office2010+vs2013 解决办法是修改连接字符串: 处理exce ...

  9. 强大的Core Image框架，各种滤镜处理图像

    首先介绍一下Core Image,他是一个很强大的图像处理框架,他可以让你简单的应用各种滤镜来处理图像,比如说色相,饱和度,亮度等等...他是运用GPU(CPU)实时地处理图像数据和视频的帧.而且Co ...

  10. node http.get请求

    var http = require('http'); var querystring = require('querystring') var url = 'http://www.baidu.com ...