文字上下滚动是经常用到的js效果，这里介绍一种上下渐隐渐出的文字展现效果！

代码实现很简单，只需要引入jquery就可以。

代码如下：

<!DOCTYPE>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文字滚动</title>

<style type="text/css">

 #sidebar{width:200px; height;500px; overflow:hidden; margin:0 auto; background:#f00; color:#fff;}

 #marquee{width:200px; margin:0;padding:0;}

 #marquee li{width:200px;height:20px; line-height:20px;}

 ul li{list-style:none;}

</style>

</head>

<body>

<div id="sidebar">

        <ul id="marquee" class="marquee spy">

            <li>11111111111111111111111111111</li>

            <li>22222222222222222222222222222</li>

            <li>33333333333333333333333333333</li>

            <li>44444444444444444444444444444</li>

            <li>55555555555555555555555555555</li>

            <li>asdsdssssssssssssssssssdddddd</li>

            <li>ggggggggggggggggggggggggggggg</li>

            <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>

            <li>11111111111111111111111111111</li>

            <li>22222222222222222222222222222</li>

            <li>33333333333333333333333333333</li>

            <li>44444444444444444444444444444</li>

            <li>55555555555555555555555555555</li>

            <li>asdsdssssssssssssssssssdddddd</li>

            <li>ggggggggggggggggggggggggggggg</li>

            <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>

        </ul>

      </div>

</body>

</html>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

    $('ul.spy').simpleSpy();

});

(function ($) {

$.fn.simpleSpy = function (limit, interval) {

    limit = limit || 12;//展示数量

    interval = interval || 4000;

    return this.each(function () {

        var $list = $(this),

            items = [],

            currentItem = limit,

            total = 0,

            height = $list.find('> li:first').height();

        $list.find('> li').each(function () {

            items.push('<li>' + $(this).html() + '</li>');

        });

        total = items.length;

        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        function spy() {

            var $insert = $(items[currentItem]).css({

                height : 0,

                opacity : 0,

                display : 'none'

            }).prependTo($list);

            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {

                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                $(this).remove();

            });

            currentItem++;

            if (currentItem >= total) {

                currentItem = 0;

            }

            setTimeout(spy, interval)

        }

        spy();

    });

};

})(jQuery);

</script>

样式自己随便定义都可以！展示的数量也可以自己更改，效果看起来还是不错的！

jquery实现文字上下滚动效果的更多相关文章

  1. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  2. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  3. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  4. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  5. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  6. jquery文字纵向滚动效果（带间隔停留）

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  7. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  8. 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...

  9. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

随机推荐

  1. Base64中文不能加密问题

    最近用到了Base64.js来对url参数进行加密,字母和数字都可以很好地加密/解密. 但测试中文时发现不能进行转换,貌似Base64.js不支持中文字符. 联想到encodeURI()对url的编码 ...

  2. 用C#绘图实现动画出现卡屏（运行慢）问题的解决办法

    原文:用C#绘图实现动画出现卡屏(运行慢)问题的解决办法 正在用C#做一个小游戏,需要用到动画,上次解决的问题是闪烁问题,用双缓冲技术.以为不会有什么问题了.后来当把图片全部绘制上去的时候依然出现了卡 ...

  3. javascript中用来定义引用类型的一种"默认"模式

    // 终极版:组合使用构造函数模式和原型模式:***************************** // 评价:集构造函数模式和原型模式之大成: 用来定义引用类型的一种默认模式 function ...

  4. android--解--它们的定义tabhost（动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征）

    在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...

  5. mac os x10.11.2系统eclipse无法读取环境变量的问题

    eclipse调试Android自动化脚本的时候一直无法找到adb,遇到这么坑的问题,折腾死了,记录一下. mac os x10.11.2系统GUI程序(eclipse)无法读取~/.bash_pro ...

  6. JAVA于Get和Post差异请求

    1. get 离server在对数据的访问.post 它是对server数据的传输. get 请求返回 request - URI 随机信息指出,. Post 请求发送电子邮件.观看新闻或交互式用户发 ...

  7. vim添加自己//解决方案

    使用vim从外面将代码复制并粘贴到时间,假设有一排//凝视.自己主动下一行加入//和每行增加一个<tab>.格全乱:其他编辑器*.c *cpp其他文件格当公式,假设有一排//凝视,按o换行 ...

  8. 【高德地图API】如何获得行政区域？如何制作行政规划图？

    原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...

  9. CSharp设计模式读书笔记（9）：组合模式(学习难度：★★★☆☆，使用频率：★★★★☆)

    组合模式(Composite Pattern): 组合多个对象形成树形结构以表示具有“整体—部分”关系的层次结构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可 ...

  10. boost进程间通信经常使用开发一篇全（消息队列，共享内存，信号）

    本文概要: 敏捷开发大家想必知道并且评价甚高,缩短开发周期,提高开发质量.将大project独立为不同的小app开发,整个开发过程,程序可用可測,所以提高了总体的质量.基于这样的开发模式和开发理念,进 ...