`

jQuery实现文字上下【渐进】滚动

阅读更多

【前言】

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

 

【主体】

1、知识点

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

     (2)css方法重定义样式

 

2、原理

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

 

3、代码

下面直接上代码,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字滚动</title>
	<style type="text/css">
		*{
			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);
		}
	</style>
	<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
	<script type="text/javascript">
		$(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);
			});
		})
	</script>
</head>
<body>
<div class="main">
	<ul>
		<li>我是1</li>
		<li>我是2</li>
		<li>我是3</li>
		<li>我是4</li>
		<li>我是5</li>
		<li>我是6</li>
	</ul>
</div>
</body>
</html>

 

4、拓展

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

 

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

.

分享到:
评论

相关推荐

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    接下来,编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性,模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器,然后逐个将其移动到可视...

    jQuery排名文字无缝循环向上滚动代码

    本篇文章将详细解析如何使用jQuery实现标题中提到的"排名文字无缝循环向上滚动"的效果,并结合给定的文件结构进行分析。 首先,我们来看`index.html`文件,这是网页的核心部分。它通常包含HTML结构,用于定义网页的...

    jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622

    【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果,它模拟了新浪微博中图片和文字列表的滚动展示方式,通常用于新闻资讯或者社交媒体的动态展示...

    jquery文字上下滚动

    一旦引入jQuery,你可以编写JavaScript代码来实现文字滚动。一种简单的方法是使用`animate()`函数,它可以改变CSS属性,如`top`或`bottom`,以创建滚动效果。以下是一个基本的示例: ```javascript $(document)....

    jQuery实现文字上下滚动插件meuiTextScroll.zip

    《jQuery实现文字上下滚动插件meuiTextScroll详解》 在网页设计中,动态效果能够提升用户体验,使得信息展示更具吸引力。jQuery作为一个轻量级、功能丰富的JavaScript库,为开发者提供了许多便利。本文将深入探讨...

    jquery 文字向上滚动

    7. **js**:这个目录可能包含了所有必要的JavaScript文件,包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时,主要涉及的技术点可能包括: 1. **DOM操作**:jQuery提供了一系列方便...

    一个jquery广告文字上下滚动效果

    标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...

    jquery文字上下无缝滚动

    使用jQuery实现文字上下无缝滚动,可以大大减少开发时间和代码量。 **实现步骤:** 1. **引入jQuery库**:首先,确保在HTML文档中引入jQuery库。通常,我们通过CDN链接引入,例如: ```html ...

    jQuery Bootstrap响应式新闻列表文字上下滚动特效

    标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表,同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分,...

    jQuery实现的文字无缝上下滚动效果源码.zip

    要实现文字无缝上下滚动,我们需要使用jQuery的动画方法。`animate()`函数可以创建自定义动画,它可以改变CSS属性,如`top`或`left`,以实现元素的平滑移动。在这个场景中,我们将使用`animate()`来改变文字容器的...

    jQuery实现网站中公告上下无缝滚动,marquee

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果,因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中,我们将深入探讨如何使用jQuery实现这个功能。 首先,我们需要在...

    JQUery实现上下循环滚动效果

    本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动效果。 首先,我们需要理解jQuery的核心理念。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画制作以及...

    jQuery实现列表自动滚动循环滚动展示新闻

    3. jQuery实现滚动功能:首先在jQuery的$(function() {})内定义局部变量$this来引用新闻滚动容器的jQuery对象。然后通过$.hover()方法为容器添加鼠标悬停事件,当鼠标悬停时调用 clearInterval() 来清除滚动定时器,...

    jQuery实现按钮控制文字上下滚动代码源码.zip

    本资源“jQuery实现按钮控制文字上下滚动代码源码.zip”提供了使用jQuery来实现文字滚动效果的代码示例,适用于网页动态效果的开发。 1. **jQuery基础知识**:jQuery库通过一种简洁的语法,如`$()`选择器,使得...

    jQuery实现表头固定表格内容滚动效果

    在网页设计中,当表格数据过多...总之,通过`jQuery`实现表头固定表格内容滚动效果,可以提升用户在浏览大量数据时的体验。在实际应用中,可以根据项目需求对上述代码进行调整和优化,以达到最佳的视觉效果和性能表现。

    jquery版文字水平方向无限循环滚动.zip

    标题中的“jquery版文字水平方向无限循环滚动”指的是一个基于jQuery实现的JavaScript特效,它使得文字能够在水平方向上持续、不间断地循环滚动。这个技术在网页设计中常用于展示新闻标题、广告语或者滚动公告等,能...

    jQuery实现的上下滚动公告栏

    本教程将深入探讨如何使用jQuery来创建一个上下滚动的公告栏,这是许多网站用来显示重要信息或通知的常见功能。 首先,我们要理解jQuery的核心函数`animate()`。`animate()`允许我们创建平滑的自定义动画效果。在...

    【仅适合初学者】js 实现 文字上下滚动

    jQuery 实现文字上下滚动

Global site tag (gtag.js) - Google Analytics