如何使用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 相关文章推荐
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
package.json各个属性说明详解
Mar 11 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
微信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
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
Javascript缓存API
2016/06/14 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
学习python处理python编码问题
2011/03/13 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
详解Python3 基本数据类型
2019/04/19 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
四年大学自我鉴定
2014/02/17 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
会议欢迎标语
2014/06/30 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
大学新生入学感想
2015/08/07 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Django中session进行权限管理的使用
2021/07/09 Python
SpringBoot详解执行过程
2022/07/15 Java/Android