<style type="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul{height:100px;overflow:hidden;}
ul li{line-height:20px;height:20px;}
</style>
</head>
<body>
<ul id="list">
<li>“卧槽泥马”：又一网络新词1</li>
<li>“卧槽泥马”：又一网络新词2</li>
<li>“卧槽泥马”：又一网络新词3</li>
<li>“卧槽泥马”：又一网络新词4</li>
<li>“卧槽泥马”：又一网络新词5</li>
<li>“卧槽泥马”：又一网络新词6</li>
<li>“卧槽泥马”：又一网络新词7</li>
<li>“卧槽泥马”：又一网络新词8</li>
<li>“卧槽泥马”：又一网络新词9</li>
<li>“卧槽泥马”：又一网络新词10</li>
<li>“卧槽泥马”：又一网络新词11</li>
<li>“卧槽泥马”：又一网络新词12</li>
<li>“卧槽泥马”：又一网络新词13</li>
<li>“卧槽泥马”：又一网络新词14</li>
</ul>
<script type="text/javascript">
function scroll(element, delay, speed, lineHeight) {
var numpergroup = 5;
var slideBox = (typeof element == 'string')?document.getElementById(element):element;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var liLength = slideBox.getElementsByTagName('li').length;
var lack = numpergroup-liLength%numpergroup;
for(i=0;i<lack;i++){
slideBox.appendChild(document.createElement("li"));
}
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if ( slideBox.scrollTop % lineHeight == 0 ) {
clearInterval(tid);
for(i=0;i<numpergroup;i++){
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
}
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, delay);
}
scroll('list', 5000, 1, 20 );//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>
分享到：
相关推荐
综上所述，"js+实现+滚动的表格"是通过JavaScript和CSS实现的一种增强网页表格用户体验的技术。它不仅使得大量数据的展示更为便捷，还提升了网页的交互性和性能。通过理解和掌握这些知识，开发者能够创建更加高效、...
本项目“JS实现浏览器滚动显示、声音提醒系统通知”聚焦于利用JS技术来增强用户界面的互动性和提示性。 一、浏览器滚动显示 在网页中，当用户滚动页面时，通常希望某些关键信息始终保持可见。这可以通过JS实现，...
javascript 实现滚动条滚动到一定距离时显示层 可以兼容全部浏览器。
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
"利用JS+CSS实现滚动表格数据展示"是一个常见的需求，它可以帮助用户逐行浏览大量的信息，而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要...
在本文中，我们将深入探讨如何使用JavaScript实现单行文字的滚动效果，这是一种常见的动态显示信息的方式，尤其适用于有限的空间展示大量文本。 首先，我们需要理解基本的HTML结构，因为JavaScript通常与HTML和CSS...
本篇文章将详细探讨如何使用JavaScript实现图片滚动切换，并结合支持Access数据库进行数据交互。 一、图片滚动切换原理 图片滚动切换的基本思路是通过定时器（setTimeout或setInterval）来改变图片显示，创建一个...
每个子元素内部可能包含标题和内容区域，内容区域可能需要实现滚动条效果。 CSS（Cascading Style Sheets）文件用于设置网页的样式和布局。在这个项目中，`css`文件将定义Tab选项卡的外观，包括颜色、字体、边框、...
本教程将深入探讨如何使用原生JavaScript实现歌词滚动的功能。我们将涉及到以下几个关键知识点： 1. **DOM操作**：JavaScript是操作网页动态效果的重要工具，其中DOM（Document Object Model）是网页内容的结构化...
以下将详细介绍如何使用JavaScript实现这一功能，以及可能涉及到的相关知识点。 首先，我们需要准备HTML结构，这通常包括一个容器元素来包裹所有的图片，每个图片作为一个子元素。例如： ```html ``` 接...
总结，通过JavaScript实现图片自动滚动和手动控制是一项涉及HTML、CSS和JavaScript多方面技术的任务，需要理解DOM操作、事件监听、动画效果以及用户交互设计。通过不断学习和实践，你可以创建出具有出色用户体验的...
在“JS实现图片滚动效果”中，我们通常会用到JavaScript的事件处理、定时器以及DOM操作等技术。例如，通过监听用户的行为（如点击按钮），触发图片的切换；使用setInterval或setTimeout函数创建定时器，实现自动轮播...
以下是一个简单的JavaScript实现示例： ```javascript var thumbnailList = document.getElementById('thumbnailList'); var bigImage = document.getElementById('bigImage'); var currentIndex = 0; // 自动滚动...
在实现图片滚动效果时，JS可以动态改变图片的显示状态，实现平滑的动画过渡。 图片滚动通常分为两种类型：水平滚动和垂直滚动。实现这些效果的核心思路是通过定时器（如JavaScript的`setInterval`函数）周期性地...
总的来说，通过JavaScript实现图片和文字的无缝滚动，需要理解HTML、CSS和JS的基本原理，以及如何利用它们协作实现动态效果。通过不断实践和优化，可以创造出既美观又高效的滚动效果，提升网站的用户体验。
在网页设计中，"DIV+CSS+JAVASCRIPT实现图片滚动效果"是一个常见的动态展示技术，用于在有限的空间内展示多张图片。这个技术结合了HTML布局的强大工具——Div，CSS样式表来控制视觉样式，以及JavaScript进行交互功能...
在JavaScript的世界里，实现滚动条效果是一个常见的需求，特别是在创建自定义UI或者增强用户体验时。本文将深入探讨如何使用JS原生方法来实现这一功能，同时也会涉及到与滚动条相关的DOM API和事件处理。 首先，...
在本主题中，"JS滚动效果，首页滚动显示"是指利用JavaScript技术实现网站首页内容随着用户滚动页面时动态显示的效果。这种效果可以提升用户体验，使得信息展示更加流畅且吸引注意力。 在首页滚动显示中，常见的应用...
本文将深入探讨如何使用JavaScript实现标题栏信息的横向滚动。 首先，我们需要在HTML中设置一个容器，用于存放滚动的文本。例如，我们可以创建一个`<div>`元素，并设置其样式为固定宽度，超出部分隐藏，以实现滚动...
在本案例中，"Js|JavaScript 广告滚动显示源代码"是一个面向过程的编程示例，它展示了如何利用JavaScript来创建一个自动滚动的广告展示效果。这种效果常见于网站的侧边栏或顶部，可以吸引用户注意力并展示多条广告...