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. HDU 4971 - A simple brute force problem【最大权闭合图】

    有n(20)个工程,完成每个工程获得收益是p[i],m(50)个需要解决的难题,解决每个难题花费是c[i] 要完成第i个工程,需要先解决ki个问题,具体哪些问题,输入会给出 每个难题之间可能有依赖关系 ...

  2. PL/SQL 批量SQL

    批量SQL包括: FORALL语句 BULK COLLECT子句 FORALL语句 FORALL具有如下结构: FORALL loop_counter IN bounds_clause [SAVE E ...

  3. PHP 开启报错机制

    屏蔽PHP错误提示 方法一:在有可能出错的函数前加@,然后or die("") 如: @mysql_connect(...) or die("Database Conne ...

  4. 表中查询重复的数据，如何通过sql语句查询？

    1.最直观的思路:要知道所有名字有重复人资料,首先必须知道哪个名字重复了:select name from emp group by name having count(*)>1所有名字重复人的 ...

  5. 颜色rgb

    1.几种基本颜色的rgb 黑色:R.G.B(0.0.0) 白色:R.G.B(255.255.255) 红色:R.G.B(255.0.0) 绿色:R.G.B(0.255.0) 蓝色:R.G.B(0.0. ...

  6. Linux命令：chmod命令

    chmod命令:改变文件或目录的存取权限 #权限代号 -r 文件被读取 4 -w 文件被写入 2 -x 文件被执行 1 #权限范围 -u 文件所有者 -g 文件所有者所在组 -o 其他 -a 全部 # ...

  7. asp.net 网站和asp.net Web 应用程序的一处不同

    环境为:VS2008Team+.net3.5 asp.net 网站前台页面<%= %>这样绑定可以,asp.net Web 应用程序就不可以 示例代码如下: 1.asp.net网站 < ...

  8. SGU 152.Making round

    不断向下取直到,忽略的数累计到一个百分比,给当前百分比加1. 这道题要避免处理浮点数,用余数来处理,不然会wa 9 #include <iostream> #include <cma ...

  9. Yii2的相关学习记录，前后台分离及migrate使用（七）

    最近一直忙其它的(其实是懒!),将<深入理解Yii2>看了一遍,一些当初没明白的稍微明了了点,然后又看yii2的图片上传等处理.富文本.restful什么的,但由于没进行到这里,只看也不管 ...

  10. Mysql访问 for橙子小海

    package com.mvc.model.dao; import com.mvc.model.daoutil.DBConn; import com.mvc.model.entity.Blog; 这是 ...