直接上代码：

<!DOCTYPE html>

<html>

<head>

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

<title>jQuery实现文字逐条向上滚动特效</title>

<style>

*{ margin:0; padding:0; list-style:none;}

#FontScroll{width:100%;height:120px;line-height:30px;border:1px solid green;overflow:Hidden;padding:5px 0;margin:0px auto;}

#FontScroll .line{text-align:center;width:100%;}

#FontScroll .fontColor a{color:red;}

</style>

</head>

<body>

<!-- 代码部分 begin -->

<div id="FontScroll">

    <ul>

        <li><a href="http://www.lanrenzhijia.com">懒人之家</a></li>

        <li><a href='http://www.lanrenzhijia.com/flash/' >Flash素材</a></li>

        <li><a href='http://www.lanrenzhijia.com/nav/' >菜单导航</a></li>

        <li><a href='http://www.lanrenzhijia.com/time/' >时间日期</a></li>

        <li><a href='http://www.lanrenzhijia.com/banner/' >焦点图</a></li>

    </ul>

</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script>

(function($){

    $.fn.FontScroll = function(options){

        var d = {time: 3000,s: 'fontColor',num: 1}

        var o = $.extend(d,options);

        this.children('ul').addClass('line');

        var _con = $('.line').eq(0);

        var _conH = _con.height(); //滚动总高度

        var _conChildH = _con.children().eq(0).height();//一次滚动高度

        var _temp = _conChildH;  //临时变量

        var _time = d.time;  //滚动间隔

        var _s = d.s;  //滚动间隔

        _con.clone().insertAfter(_con);//初始化克隆

        //样式控制

        var num = d.num;

        var _p = this.find('li');

        var allNum = _p.length;

        _p.eq(num).addClass(_s);

        var timeID = setInterval(Up,_time);

        this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);});

        function Up(){

            _con.animate({marginTop: '-'+_conChildH});

            //样式控制

            _p.removeClass(_s);

            num += 1;

            _p.eq(num).addClass(_s);

            if(_conH == _conChildH){

                _con.animate({marginTop: '-'+_conChildH},"normal",over);

            } else {

                _conChildH += _temp;

            }

        }

        function over(){

            _con.attr("style",'margin-top:0');

            _conChildH = _temp;

            num = 1;

            _p.removeClass(_s);

            _p.eq(num).addClass(_s);

        }

    }

})(jQuery);

$('#FontScroll').FontScroll({time: 2000,num: 1});

</script>

<!-- 代码部分 end -->

</body>

</html>

Jquery实现文字向上逐条滚动的更多相关文章

  1. 使用JavaScript完成文字向上间歇滚动

    使用JavaScript完成文字的间歇滚动 const init = (initData) => { const area = initData.area; // 设置单行滚动的高度: cons ...

  2. jquery单行文字上下循环滚动

    html代码: <div class="box"> <div class="t_news"> <b>已关联奖励账号.昵称:& ...

  3. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  4. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  6. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  7. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  8. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  9. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

随机推荐

  1. adb无法使用，提示error: unknown host service的解决办法

    此时,需要辨别电脑的5037端口被哪个应用程序占用的方法:(使用adb时需要5037端口是空闲的) 1. 打开命令行,输入命令:netstat -ano |findstr "5037&quo ...

  2. ios 判断相册文件图片大小的方法

    ALAssetsLibrary* alLibrary = [[ALAssetsLibrary alloc] init]; [alLibrary assetForURL:[info objectForK ...

  3. [原创]多版本Java环境变量的配置

    起因:   偶然突发兴致, 收拾下自己的老T500电脑, 用来做个家庭开发用机. 应为每次装系统都有GHOST备份的习惯, 所以需要提前搭建好开发环境. 而且新装系统的目的之一, 也是想研究下Andr ...

  4. IOS学习之路--OC的基础知识

    1.项目经验 2.基础问题 3.指南认识 4.解决思路 ios开发三大块: 1.Oc基础 2.CocoaTouch框架 3.Xcode使用 -------------------- CocoaTouc ...

  5. 我的第一个web应用开发搭建-环境配置

    MyEclipse 2014 破解图文详细教程 MyEclipse作为Java EE最受欢迎的IDE,最新版本为2014版,MyEclipse 2014破解的方法. 一.安装完成MyEclipse20 ...

  6. Action中获取servletAPI对象的方法

    1.ServletActionContext:可以从中获取当前Action对象需要的一切ServletAPI的相关对象: 常用的方法: 1.获取HttpServletRequest:ServletAc ...

  7. Linux 常用命令 :ls命令

    ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...

  8. 写css时要注意数字的浮动方向

    写css时要注意数字的浮动方向  当数字位数增加时他的方向才是正确的 text-align:right;padding-right:29px;

  9. [原创.数据可视化系列之五]韩国"萨德"系统防御图

    自从7月8日美国和韩国共同宣布将在韩国部署萨德反导系统后,韩国国内对此事的巨大争议以及本地区一些国家的强烈不满情绪在持续发酵.“萨德”(THAAD)全称“末段高空区域防御系统”,是美国导弹防御局和美国 ...

  10. hbase scan 的例子

    /** * Created by han on 2016/1/28. */ import org.apache.hadoop.conf.Configuration; import org.apache ...