如何使用jquery实现文字上下滚动效果


Posted in Javascript onOctober 12, 2016

实现文字上下滚动是经常用到的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有所帮助。

Javascript 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
javascript操作数组详解
Dec 17 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
详解Vue 的异常处理机制
Nov 30 Vue.js
JavaScript 数组去重详解
Sep 15 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
微信小程序 location API接口详解及实例代码
Oct 12 #Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 #Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
webpack+vue.js快速入门教程
Oct 12 #Javascript
You might like
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript 写类方式之十
2009/07/05 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
python实现端口转发器的方法
2015/03/13 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python 利用toapi库自动生成api
2020/10/19 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
数控专业大学生的自我鉴定
2013/11/13 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
出国签证在职证明范本
2014/11/24 职场文书
大学生党课感想
2015/08/11 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
PHP命令行与定时任务
2021/04/01 PHP
90行Python代码开发个人云盘应用
2021/04/20 Python