标记一下来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>间隔新闻滚动</title>
<style type="text/css">
* { margin:0; padding:0; font:normal normal 12px/1.5em "Arial"; }
ul li { list-style:none;}
#scroll { width:300px; overflow:hidden; height:20px; margin:50px auto; border:1px solid red; text-align:center;}
</style>
</head>
<body>
<ul id="scroll">
<li ><a href="#">新闻一</a></li>
<li ><a href="#">新闻二</a></li>
<li ><a href="#">新闻三</a></li>
<li ><a href="#">新闻四</a></li>
</ul>
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('scroll');
var t=setInterval(function(){scrollup(o,24,0);},2000);
o.onmouseover=function(){clearInterval(t)};
o.onmouseout=function(){t=setInterval(function(){scrollup(o,24,0);},2000)}
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}else{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
while (node.nodeType!=1)
{
node=node.nextSibling;
}
return node;
}
</script>
</body>
</html>
分享到：
相关推荐
基于jQuery的一个无间隔滚动效果，代码简单，可以随意设置每次滚动的行数和停隔时间等，用于在网站首页滚动最新动态等非常实用、好看
在探讨“js文字间隔滚动上下滚动”的知识点时，我们深入分析了如何利用JavaScript结合jQuery库实现文本元素的动态上下滚动效果。这一技术在网站设计、新闻滚动条、公告栏等场景中极为常见，能有效提升用户体验，使得...
JavaScript中的无间隔滚动效果，通常用于创建新闻滚动条、公告滚动或者其他信息展示的效果。这种滚动技术使得文本或图片能够不间断地在网页上自动滚动，给用户带来动态视觉体验。在HTML5时代，虽然CSS3提供了许多...
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。 要实现这个效果，首先...
在提供的压缩包中，"JS无间隔滚动代码"很可能是实现这些滚动效果的源代码。通过查看和学习这个代码，你可以了解具体的实现细节，包括如何设置定时器、如何改变元素位置、如何处理滚动事件等。"使用说明.url"则可能是...
`JQLianXuGunDong.js`是专门用于实现jQuery无间隔滚动的脚本文件。这个文件中包含了实现滚动效果的核心代码，通常包括以下几部分： 1. **初始化设置**：定义滚动区域的CSS样式，设置滚动元素的初始位置，以及滚动的...
"JS无间隔滚动代码"是实现页面元素连续、无停顿滚动的一种技术，通常用来创建新闻滚动条、轮播图或者滚动公告等效果。这种技术能够吸引用户注意力，并且有效地展示大量信息。 在JavaScript中，实现无间隔滚动通常...
JS可以监听时间间隔，然后更新文本的位置，模拟出从右向左或从下向上的滚动效果。这一过程可以通过CSS样式和JavaScript的DOM操作结合完成。 二、JS核心代码 1. 创建HTML结构： 首先，我们需要在HTML中创建一个包含...
至此，一个简单的图片间隔上滚动效果就实现了。你可以根据实际需求调整图片大小、滚动速度以及边框样式。同时，为了增加用户体验，还可以添加暂停、播放、切换图片等功能，以及动画过渡效果。 以上所述是基本的实现...
1. 滚动新闻原理：通过定时改变新闻项的显示位置，模拟出滚动效果。可以使用`setTimeout()`或`setInterval()`函数来实现定时任务。 2. 使用`.next()`和`.prev()`：结合`index()`方法，可以实现新闻项的前后切换。 ...
在本文中，我们将深入探讨如何使用JavaScript实现无间隔滚动效果，特别是基于提供的`ScrollText.js`库。这个效果通常用于显示滚动列表，如最新产品、新闻标题或其他动态更新的内容。我们将分析`Demo.htm`文件中的...
使用CSS3，我们可以创建更灵活、更可控的滚动效果。首先，需要一个包含新闻内容的容器，并设置溢出隐藏： ```html <!-- 新闻内容 --> ``` ```css .news-container { width: 100%; overflow: hidden; } ....
标题中的“上下滚动效果”指的是在网页设计中，利用JavaScript（jQuery）和CSS技术实现的一种动态展示文本或内容的方式。这种效果通常用于新闻滚动、公告滚动等场景，使得信息能够在一个固定区域里循环滚动，既节省...
这些库提供了一系列的API和配置选项，可以轻松定制滚动效果，包括速度、动画类型、控制样式等。 5. **响应式设计**：考虑到现代设备的多样性，一个好的图片滚动方案应当支持响应式布局，适应不同的屏幕尺寸和设备...
本示例中的"jQuery两行列表滚动效果"是一种常见的网页动态展示技术，常用于产品展示、新闻滚动或者广告轮播等场景。下面将详细介绍这个效果的实现原理和相关知识点。 首先，jQuery的动画功能是通过`.animate()`函数...
本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动效果。 首先，我们需要理解jQuery的核心理念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作以及...
4. **动画逻辑**：插件内部可能使用`animate()`方法来实现平滑的滚动效果。这个方法接受多个CSS属性作为参数，比如`{top: -100px}`，表示将元素的顶部位置移动100像素。通过循环遍历新闻项并改变它们的位置，可以...
对于新闻滚动展示的div元素，通过CSS设置一个固定的高度和overflow属性为hidden，这样超出高度的li元素就会被隐藏，并且可以创建滚动效果。 3. jQuery实现滚动功能：首先在jQuery的$(function() {})内定义局部变量$...
9. **可扩展性**：为了使代码更具通用性，可以考虑将滚动效果封装成一个函数或插件，接收参数以定制动画速度、间隔、方向等。 10. **测试与调试**：最后，对不同浏览器和设备进行测试，确保兼容性和性能表现。 ...
新闻滚动效果是网页设计中常见的元素，它可以让新闻标题或内容以滚动的方式展示，增加视觉吸引力。本篇文章将深入讲解如何使用JS实现新闻滚动效果。 首先，我们需要了解基本的HTML和CSS来构建新闻滚动的基础结构。...