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. empty函数PHP

    empty译为: adj.空的,空虚的,空洞的;空闲的,无效的,徒劳的;无聊的,愚蠢的;言语或行动空洞的 vt.(使)成为空的, 把…弄空;把…腾出来 vi.成为空的;流空 n.空车;空的东西 是PH ...

  2. sql 减去分钟

    SQL SERVER:SELECT DATEADD( minute,-10,GETDATE()) ORACLE:SELECT to_char(sysdate -interval '10' minute ...

  3. (转)ecshop刷新页面出现power by ecshop和链接的解决办法

    当小伙伴在使用echop模板进行修改的时候,如果你删掉底部自带版权后,再调试程序刷新界面的时候,时不时就会冒出一个power by ecshop,而且是带有链接的,很不舒服,所以需要去掉,下面是最简单 ...

  4. .net excel利用NPOI导入oracle

    1.链接数据库 引用System.Data.OracleClient: //数据库链接字符串   Data Source如:192.168.5.153:1521/orcl string linkStr ...

  5. 【转】iOS-Core-Animation-Advanced-Techniques（三）

    原文: http://www.cocoachina.com/ios/20150105/10827.html 专用图层 复杂的组织都是专门化的--Catharine R. Stimpson 到目前为止, ...

  6. 06MySQL数据库入门

    1.数据库的概念 数据库是保存数据的仓库,可以方便的把数据放进去,并且把数据根据各种需求取出来. 数据库管理系统(Database Management System,DBMS)是对数据库进行管理(增 ...

  7. Java hashCode 和 equals()

    1 Object中定义的hashCode() public int hashCode() Returns a hash code value for the object. This method i ...

  8. 复制构造函数2——深入理解

    //如果不显示定义复制构造函数,编译会出错,原因是:在创建对象s2时,调用默认复制构造函数并用对象s1对其进行初始化,致使s2中指针 //与s1中指针指向同一储存空间,当一个对象生命周期结束后调用析构 ...

  9. Fedora上配置一个安全FTP

    现在流行的FTP服务器,比较著名的有WU-FTP(Washington University FTP)和VSFTP(Very Secure FTP 非常安全的FTP)以及Proftp,pureftp等 ...

  10. C#应用程序获取项目路径的方法总结

    一.非Web程序   //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory     //当前工作目录的完全限定路径2.Envi ...