微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

一个JQuery写的点击上下滚动的小例子_jquery

php中文网
发布： 2016-05-16 18:02:56
原创
1181人浏览过

功能需求：
1、滚动框内显示10条记录；
2、有向上和向下滚动按钮，每次点击按钮向上或向下滚动记录条数，不自动滚动；
3、记录条数不循环滚动，滚动到起点或终点则停止滚动。
下面介绍一个简单实现方法：
1、外层容器（div） overflow: hidden，内层列表（ul）
2、按钮点击事件触发一个修改列表的函数
3、应用animate实现动画效果
具体不再啰嗦，直接上代码
CSS设置

小爱开放平台
小爱开放平台

小米旗下小爱开放平台

小爱开放平台 23
查看详情 小爱开放平台
复制代码 代码如下:



JQuery 代码
复制代码 代码如下:



可以设置$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });对滚动按钮，滚动行数，滚动速度进行设置。
Html Body 内容
复制代码 代码如下:



信息滚动栏DEMO：




  • 这是滚动信息的第1行

  • 这是滚动信息的第2行

  • 这是滚动信息的第3行

  • 这是滚动信息的第4行

  • 这是滚动信息的第5行

  • 这是滚动信息的第6行

  • 这是滚动信息的第7行

  • 这是滚动信息的第8行

  • 这是滚动信息的第9行

  • 这是滚动信息的第10行

  • 这是滚动信息的第11行

  • 这是滚动信息的第12行

  • 这是滚动信息的第13行

  • 这是滚动信息的第14行

  • 这是滚动信息的第15行

  • 这是滚动信息的第16行

  • 这是滚动信息的第17行

  • 这是滚动信息的第18行

  • 这是滚动信息的第19行

  • 这是滚动信息的第20行

  • 这是滚动信息的第21行

  • 这是滚动信息的第22行

  • 这是滚动信息的第23行

  • 这是滚动信息的第24行

  • 这是滚动信息的第25行

  • 这是滚动信息的第26行

  • 这是滚动信息的第27行

  • 这是滚动信息的第28行

  • 这是滚动信息的第29行

  • 这是滚动信息的第30行

  • 这是滚动信息的第31行

  • 这是滚动信息的第32行






大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：range 标准化之获取_javascript技巧 下一篇：Javascript面向对象编程（三） 非构造函数的继承_js面向对象
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
TypeScript中处理Map集合中的预期值：非空断言操作符 ! 的应用与考量 在TypeScript中处理Map等集合类型时，类型检查器有时无法静态推断出我们确信存在的特定值。本文将深入探讨如何利用非空断言操作符!，在开发者对运行时值有明确把握时，告知类型系统该值非null或undefined。通过实例，文章将解释!的作用、适用场景及潜在风险，帮助开发者在保持类型安全的同时，更高效地编写代码。
2025-11-18 13:22:01
691
JavaScript调试技巧_Chrome DevTools高级功能 掌握ChromeDevTools高级调试技巧可显著提升效率：1.通过断点、条件断点、DOM断点和XHR断点精准控制执行；2.利用调用栈和作用域面板查看上下文及变量状态，实时监控表达式并修改变量值；3.使用单步调试按钮（Stepover、Stepinto、Stepout、Resume）控制代码执行流程；4.启用“Pauseonexceptions”捕获未处理和已捕获异常，并开启异步堆栈追踪Promise等异步操作。熟练运用这些功能有助于快速定位复杂问题。
2025-11-18 13:15:05
366
数据可视化：D3.js与Chart.js选型指南 D3.js适合高定制化复杂交互的可视化项目，需较强前端能力；Chart.js适用于快速开发标准图表，上手简单。1.D3.js功能强大但学习成本高，使用SVG渲染，灵活性强；2.Chart.js基于Canvas，性能优，配置简洁，适合常规报表。两者可结合使用，根据团队能力和需求选择。
2025-11-18 13:04:06
521
使用正则表达式精确匹配双大括号内文本并去除空白 本文详细介绍了如何使用正则表达式精确提取双大括号{{...}}内的文本内容，同时自动去除其前后的多余空白。通过讲解正向先行断言和正向后行断言的组合应用，以及非贪婪匹配的技巧，帮助读者掌握在复杂文本模式中进行精准数据提取的方法，确保获取纯净的目标字符串，适用于模板解析等场景。
2025-11-18 13:00:07
172
JS函数如何定义闭包函数_JS闭包函数定义原理与应用技巧 闭包是函数与其词法环境的组合，使内部函数能访问外部变量，即使外部函数已执行完毕。如functionouter(){letcount=0;returnfunctioninner(){count++;console.log(count);};}中，inner形成闭包，持续访问count。应用场景包括模拟私有变量、事件回调和函数工厂，如createCounter(step)返回带步长的计数函数。需注意内存泄漏、循环中变量共享问题及性能影响，合理使用可提升代码灵活性。
2025-11-18 12:58:02
857
Blazor应用中FontAwesome的本地部署与性能优化指南 本文旨在解决Blazor应用中FontAwesome本地部署时常见的性能瓶颈和图标显示异常问题。核心内容在于解析FontAwesome的CSS-Only与JavaScript增强模式，并强调在仅使用CSS时，必须确保webfonts文件夹的正确存在与路径配置。通过优化本地文件结构和避免不必要的JavaScript引用，可以显著提升图标加载速度和应用性能。
2025-11-18 12:57:18
419
JavaScript混入模式_多重继承替代方案 混入模式通过对象扩展实现功能复用，如将Serializable和Observable方法合并到用户对象，支持动态添加行为，避免深层继承，但需注意命名冲突，推荐组合方式提升可维护性。
2025-11-18 12:52:03
735
在React中优雅地集成Spotify API：使用自定义Hook获取访问令牌 本文详细介绍了在React应用中集成SpotifyAPI时，如何高效且可复用地获取访问令牌。通过将令牌获取逻辑封装成自定义HookuseSpotifyAccessToken，我们实现了业务逻辑与UI组件的清晰分离，并提供了示例代码、使用方法以及关于敏感信息管理和错误处理的最佳实践，确保您的React应用能够专业、安全地与SpotifyAPI交互。
2025-11-18 12:34:54
584
JS注解怎么标注数组类型_ JS数组类型参数的注解方法与示例 使用JSDoc可为JavaScript数组参数添加类型注解，提升代码可读性和工具支持。1.基础数组类型用{number[]}或{Array}；2.多维数组通过叠加[]表示，如二维数组{number[][]}；3.对象数组可用{Object[]}或指定结构如{{id:number,name:string}[]}；4.混合类型使用联合类型，如{(string|number)[]}；5.可选参数在参数名外加方括号[b]，并可标注为{number[]|null}等可能为空的类型。配合VSCode或Typ
2025-11-18 12:30:02
959
TypeScript中强制Map包含特定值并安全访问的技巧：非空断言 本文探讨了在TypeScript中处理Map类型时，当开发者确信某个特定值必然存在，但类型检查器无法推断此事实时遇到的挑战。我们将介绍如何利用TypeScript的非空断言操作符!来明确告知编译器某个表达式不会是null或undefined，从而简化代码并提升类型安全，避免不必要的空值检查。
2025-11-18 12:28:02
564
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部