masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 一个JQuery写的点击上下滚动的小例子_jquery

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

WBOY
Lepaskan： 2016-05-16 18:02:56
asal
1045 orang telah melayarinya

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

复制代码 代码如下:



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行






Label berkaitan：
tatal ke atas dan ke bawah
sumber：php.cn
Artikel sebelumnya：range 标准化之获取_javascript技巧 Artikel seterusnya：Javascript面向对象编程（三） 非构造函数的继承_js面向对象
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...
daripada 2024-04-06 22:09:02
0
1
1428
Pemeriksa Sudoku tidak berfungsi? Bolehkah sesiapa membantu saya mengenal pasti ralat? Saya mencuba segala-galanya pada editor dalam talian tetapi masih mendapat ralat. Tetapi a...
daripada 2024-04-06 21:21:07
0
1
474
MySQL mendapat data daripada berbilang jadual Saya mempunyai jadual eg_design yang mengandungi lajur berikut: dan jadual eg_domains yang...
daripada 2024-04-06 18:42:44
0
2
479
Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...
daripada 2024-04-06 16:54:10
0
1
410
React Three Fiber: Mengapa acara skrol saya ketinggalan? Dalam ReactThreeFiber, saya mempunyai komponen React yang menghasilkan sprite yang saya ma...
daripada 2024-04-06 13:39:24
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan