【前言】
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实现文字上下无缝滚动，可以大大减少开发时间和代码量。 **实现步骤：** 1. **引入jQuery库**：首先，确保在HTML文档中引入jQuery库。通常，我们通过CDN链接引入，例如： ```html ...
接下来，编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性，模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器，然后逐个将其移动到可视...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
一旦引入jQuery，你可以编写JavaScript代码来实现文字滚动。一种简单的方法是使用`animate()`函数，它可以改变CSS属性，如`top`或`bottom`，以创建滚动效果。以下是一个基本的示例： ```javascript $(document)....
《jQuery实现文字上下滚动插件meuiTextScroll详解》 在网页设计中，动态效果能够提升用户体验，使得信息展示更具吸引力。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利。本文将深入探讨...
7. **js**：这个目录可能包含了所有必要的JavaScript文件，包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时，主要涉及的技术点可能包括： 1. **DOM操作**：jQuery提供了一系列方便...
标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效，常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力，增加信息的可见性...
本篇文章将详细解析如何使用jQuery实现标题中提到的"排名文字无缝循环向上滚动"的效果，并结合给定的文件结构进行分析。 首先，我们来看`index.html`文件，这是网页的核心部分。它通常包含HTML结构，用于定义网页的...
要实现文字无缝上下滚动，我们需要使用jQuery的动画方法。`animate()`函数可以创建自定义动画，它可以改变CSS属性，如`top`或`left`，以实现元素的平滑移动。在这个场景中，我们将使用`animate()`来改变文字容器的...
jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果，因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中，我们将深入探讨如何使用jQuery实现这个功能。 首先，我们需要在...
本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动效果。 首先，我们需要理解jQuery的核心理念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作以及...
标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表，同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分，...
3. jQuery实现滚动功能：首先在jQuery的$(function() {})内定义局部变量$this来引用新闻滚动容器的jQuery对象。然后通过$.hover()方法为容器添加鼠标悬停事件，当鼠标悬停时调用 clearInterval() 来清除滚动定时器，...
本资源“jQuery实现按钮控制文字上下滚动代码源码.zip”提供了使用jQuery来实现文字滚动效果的代码示例，适用于网页动态效果的开发。 1. **jQuery基础知识**：jQuery库通过一种简洁的语法，如`$()`选择器，使得...
在网页设计中，当表格数据过多...总之，通过`jQuery`实现表头固定表格内容滚动效果，可以提升用户在浏览大量数据时的体验。在实际应用中，可以根据项目需求对上述代码进行调整和优化，以达到最佳的视觉效果和性能表现。
本教程将深入探讨如何使用jQuery来创建一个上下滚动的公告栏，这是许多网站用来显示重要信息或通知的常见功能。 首先，我们要理解jQuery的核心函数`animate()`。`animate()`允许我们创建平滑的自定义动画效果。在...
jQuery 实现文字上下滚动
"Jquery实现无缝隙上下左右滚动"这个主题是关于利用jQuery创建一种动态效果，使得页面内容可以平滑、无停顿地向各个方向滚动。这种效果常见于新闻轮播、产品展示或者幻灯片等应用场景。 首先，我们需要理解“无缝隙...