jquery实现文字上下滚动效果具体代码

  • 时间:
  • 1599人关注

这篇文章主要介绍了jquery实现文字上下滚动效果。文字上下滚动循环显示也是一种非常常见而且非常容易实现的文字特效。这是一种现在比较流行用的效果,用法很简单。,另外这篇文章主要知识点是关于jquery上下滚动效果、jquery滚动效果、jquery上下滚动、jquery滚动效果的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:jquery滚动效果
  • 编辑整理:孙浩穰
  • 教程字数:2050字节
  • 阅读时间:大概7分钟
  • 下载本教程(DOC版)
  • jQuery UI开发指南
  • JavaScript和jQuery实战手册
  • jQuery 前端开发实战
  • jQuery实战
  • jQuery实战从入门到精通
  • 实现文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果!

    <!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有所帮助。

    码农之家
    基于jquery实现点击左右按钮图片横向滚动

    1小时34分钟前回答

    基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面:
    效果图如下
    基于jquery实现点击左右按钮图片横向滚动

    <!DOCTYPE html>
    <html lange="en">
    <head>
    <title>点击左右按钮图片横向滚动</title>
    <meta charset=utf-8" />
    <style type="text/css">
    * { margin:0; padding:0;}
    body { font-size:12px;}
    .box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
    .box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
    .box li:hover { color:#999; }
    .box li.active { background-position:-174px 0; color:#555;cursor:default;}
    a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
    a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
    .scroll_list{ width:10000em; position:absolute; }
    </style>
    <!-- 引入jQuery -->
    <script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    var page= 1;
    var i = 4;//每版四个图片
    //向右滚动
    $(".next").click(function(){ //点击事件
    var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
    var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
    var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
    var v_width = v_cont.width();
    var len = v_show.find("li").length; //我的视频图片个数
    var page_count = Math.ceil(len/i); //只要不是整数,就往大的方向取最小的整数
    if(!v_show.is(":animated")){
    if(page == page_count){
    v_show.animate({left:'0px'},"slow");
    page =1;
    }else{
    v_show.animate({left:'-='+v_width},"slow");
    page++;
    }
    }
    });
    //向左滚动
    $(".prev").click(function(){ //点击事件
    var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
    var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
    var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
    var v_width = v_cont.width();
    var len = v_show.find("li").length; //我的视频图片个数
    var page_count = Math.ceil(len/i); //只要不是整数,就往大的方向取最小的整数
    if(!v_show.is(":animated")){
    if(page == 1){
    v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
    page =page_count;
    }else{
    v_show.animate({left:'+='+ v_width},"slow");
    page--;
    }
    }
    });
    });
    </script>
    </head>
    <body>
    <!-- 例子 -->
    <div class="scroll" >
    <!-- "prev page" link -->
    <a class="prev" href="#"></a>
    <div class="box">
    <div class="scroll_list">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    </ul>
    </div>
    </div>
    <!-- "next page" link -->
    <a class="next" href="#"></a>
    </div>
    </body>
    </html>
    展开阅读

    上一篇:关于jquery二维码生成插件qrcode详解

    下一篇:使用jQuery完成页面定时弹出广告代码实例

    相关内容

    • jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效

      本文给大家分享的是一款jQuery整屏(全屏)滚动插件网页特效,滚动鼠标滚轮整屏一屏滚动切换代码,可设置文字/图片绝对上下左右居中显示JS代码,时下最流行的jQuery全屏滚动插件!(兼容测

      08-01jQuery multiScroll插件实现全屏鼠标滚动切换页面特效方法

      阅读更多
    • jquery文字上下滚动的代码实例

      jquery文字上下滚动的实现方法,需要的朋友可以参考一下

      01-23jquery文字上下滚动的实现方法

      阅读更多
    • jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方法

      前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题

      01-25jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

      阅读更多
    • jQuery循环滚动新闻列表实例代码

      jquery实现点击公告的上一条下一条来查看滚动条,示例代码如下,希望对大家有所帮助

      12-19jQuery循环滚动新闻列表示例代码

      阅读更多
    • 如何使用jQuery实现平滑的页面滚动到顶部或底部

      如何创建一个平滑的滚动效果是本文的目的使用jQuery让您可以滚动到你的网页的顶部或底部,相当不错的一个效果,感兴趣的你可不要错过了哈

      01-09jQuery创建平滑的页面滚动(顶部或底部)

      阅读更多
    • jQuery实现滚动图片效果的实例分享

      jQuery图片滚动图片的效果(另类实现),需要的朋友可以参考一下

      11-22jQuery图片滚动图片的效果(另类实现)

      阅读更多
    • 移动互联网之路:HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

      移动互联网之路:HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

      移动互联网之路 全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中,知识结构严谨,内容由浅入深、从易到难,讲解通俗易懂,

      大小:92.1 MB移动互联网

      点击下载
    • jQuery Mobile从入门到精通

      jQuery Mobile从入门到精通

      《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

      大小:168.7 MBjQuery

      点击下载
    • Bootstrap与jQuery UI框架设计

      Bootstrap与jQuery UI框架设计

      随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

      大小:180 MBjQuery

      点击下载
    • jQuery实战案例精粹

      jQuery实战案例精粹

      jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

      大小:272 MBjQuery

      点击下载
    • jQuery api 3.3.1中文手册

      jQuery api 3.3.1中文手册

      jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表,很实用的手册,在编写jQuery查看很实用,其内包含了jquery学习过程中的各类知识点,能够让你清楚地了解每一个函数的核心内容,属性以及css框架信息,从而更好的实现编程。需要的朋友可下载试试! 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上,或者是鼠标右击文件,选择ldquo;属性rdquo;,点击ldquo;取消限制rdquo;即

      大小:1.58 MBjQuery

      点击下载

    学习笔记

    44小时57分钟前回答

    jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效

    支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片、上下轮播图片、自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+、以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏。 支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide 使用方法: 1.加载jQuery和插件 script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"/script script type="text/javascript" src="js/jquerypp.custom.js"/script script type="……

    33小时22分钟前回答

    浅析jquery如何判断滚动条滚到页面底部并执行事件

    本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件。首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 clientHeight: 这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。 offsetHeight: 是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。 scrollTop: 这个是什么呢?他可以理解为滚动条可以滚动的长度。 举例,如果一个DIV高度是400px(即clientHeight为4……