直接上代码:

<!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. python---socketserver模块

    在<python---socket模块>中通过socket模块实现了串行处理的socket通信 在python中可以通过socketserver模块实现并发通信,而socketserver ...

  2. DAO模式应用实例

    首先在数据库中建好一个表. 然后创建一个MsterDao类的接口 package com.beiwo.epte.dao; import com.beiwo.epte.entity.Master; pu ...

  3. html信息提示框

    1.span <span title="提示信息" data-container="body" data-toggle="inf" d ...

  4. Linux守护进程

    什么是守护进程? 守护进程是生存期长的一种进程,它们常常在系统引导装入时启动,仅在系统关闭时在终止.它们没有控制终端并且在后台运行.Linux 系统中有很多守护进程用以执行系统的日常事物,而且服务器程 ...

  5. RapidXML 试用

    近半年来断断续续的封装一些SDK,在兼顾跨平台.易用性和高效率上还要顾及到对外dll的大小问题.由于之前解析SVG文件的用到了一个XML解析库xercesc,这个DLL实在巨大近4M,于是尝试用新的X ...

  6. SQL SERVER时间格式化

    begin ) begin BEGIN try ),@i)+' '+convert(VARCHAR,getdate(),@i) END TRY BEGIN catch end catch end en ...

  7. redis make时 提示 zmalloc.h:50:31: error: jemalloc/jemalloc.h:

    redis安装需要环境必备 gcc 但是若未先安装好gcc,make失败后再次 make 会提示如下错误 zmalloc.h:50:31: error: jemalloc/jemalloc.h: 这时 ...

  8. linux在home目录下使用ls命令卡死

    linux在home目录下使用ls命令卡死,原因可能是mount的某个服务器挂掉或出啥问题了,这个时候umount掉就正常了,如果umount提示device is busy,这时可以使用强制卸载   ...

  9. 直接用<img> 的src属性显示base64转码后的字符串成图片

    直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="base64转码后的字符串" ></img> 下面的图片 ...

  10. PHP入门篇

    一.PHP-什么是变量  变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以 ...