java 采集上下滚屏_jQuery实现文字上下【渐进】滚动

Myth丶恋晨 2022-11-06 12:59 128阅读 0赞

【前言】

jQuery实现文字上下滚动，原理很简单(jQuery动画+css方法)。这里简单总结下，以后讲课备录。

【主体】

1、知识点

(1)animate方法实现向上滚动

(2)css方法重定义样式

2、原理

通过jquery动画向上滚动，之后通过css方法重定义位置，接下来通过appendTo()方法将上一条记录插入到最后，以此实现依次循环播放。(注意：append()方法与appendTo()区别jQuery中append()和appendTo()的区别

)

3、代码

下面直接上代码，

文字滚动

\*\{

margin:0px;

padding: 0px;

\}

li\{

list-style-type: none;

\}

.main\{

width: 600px;

height: 50px;

border: 1px solid \#888;

margin: 10px auto;

overflow: hidden;

\}

.main ul li\{

line-height: 50px;

background-color: rgba(0,0,0,0.3);

\}

.main ul li:hover\{

background-color: rgba(0,0,0,0.2);

\}

$(function()\{

var timeId = setInterval(play,1500);

function play()\{

$(".main ul").animate(\{

"marginTop": "-50px"\},

600, function() \{

/\* stuff to do after animation is complete \*/

$(this).css(\{"marginTop":0\}).children("li:first").appendTo(this);

\});

\}

$(".main").hover(function() \{

/\* Stuff to do when the mouse enters the element \*/

clearInterval(timeId);

\}, function() \{

/\* Stuff to do when the mouse leaves the element \*/

timeId = setInterval(play,1500);

\});

\})

*  我是1
 *  我是2
 *  我是3
 *  我是4
 *  我是5
 *  我是6

4、拓展

选择ul下的第一个li有多种方法，除了通过$("ul li:first")之外，也可以通过索引获取。例如$("ul li").eq(0)

先写到这里，以后有时间继续完善

.

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 花屏文字

原理图 ![在这里插入图片描述][20190827114414612.gif] 想要看原理图的话，仅需要加上如下样式 .scanline { ...

灰太狼/ 2024年04月17日 14:19/ 0 赞/ 68 阅读

相关 Flutter 文字上下滚动切换用于公告消息提示

效果预览 ![在这里插入图片描述][e6bcd6c849a74350ab47a5038a7452d6.gif_pic_center] 1 基本使用代码 v

布满荆棘的人生/ 2023年10月07日 19:16/ 0 赞/ 30 阅读

相关 java 采集上下滚屏_jQuery实现文字上下【渐进】滚动

【前言】 jQuery实现文字上下滚动，原理很简单(jQuery动画+css方法)。这里简单总结下，以后讲课备录。【主体】 1、知识点 (1)animate方法实现向

Myth丶恋晨/ 2022年11月06日 12:59/ 0 赞/ 129 阅读

相关 jQuery实现大屏滚动播放的效果

场景需求：在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~ 代码： <!DOCTYPE HTML> <html x

傷城~/ 2022年10月10日 12:44/ 0 赞/ 158 阅读

相关 jQuery实现大屏滚动播放的效果

场景需求：在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~ 代码： <!DOCTYPE HTML> <html x

叁歲伎倆/ 2022年10月06日 00:41/ 0 赞/ 203 阅读

相关 jquery横向滑屏滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

柔情只为你懂/ 2022年08月13日 04:59/ 0 赞/ 167 阅读

相关利用jquery实现文字上下滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月15日 11:59/ 0 赞/ 174 阅读

相关 fullPage——基于jQuery全屏滚动

看到977在群里发的苹果的一个[全屏滚动网页][Link 1]，看起来非常高端，大气，上档次。拖了好几天了，今天下午试了一下。 --------------------

- 日理万妓/ 2022年05月30日 23:43/ 0 赞/ 266 阅读

相关小程序 - 实现滚动文字

小程序 - 实现滚动文字截图： ![1483449-20181102210009024-2068591461.gif][] index.wxml 文件

短命女/ 2022年04月22日 06:34/ 0 赞/ 248 阅读

相关 jquery_jquery全屏滚动插件---fullpage（H5全屏滚动小案例）

1、案例目的 ![1151059-20190603161455749-1326740335.png][] 2、准备工作　　项目文件（html、css、js分离）　　

忘是亡心i/ 2022年01月09日 11:43/ 0 赞/ 357 阅读