JavaScript实现走马灯效果的关键是设置外容器的scrollTop或者其它相应的属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走马灯</title>
<style type="text/css">
*{
padding:0;
margin:0;
border:none;
}
div{
width:200px;
height:20px;
overflow:hidden;
margin:auto;
}
li{
margin-left:2em;
height:20px;
line-height:20px;
}
</style>
</head>
<body>
<div id="news">
<ul>
<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx2</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx3</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx4</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx5</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx6</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx7</li>
<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
</ul>
</div>
<script type="text/javascript">
var obj = document.getElementById("news");
obj.scrollTop = 0;
var num = 0;
var interval = new Array();
function roll(){
obj.scrollTop++;
if(/^\d+$/.test(obj.scrollTop / 20)){
clearInterval(interval[0]);
num ++;
if(num >= 7){
num = 0;
obj.scrollTop = 0;
}
}
}
function startRoll(){
interval[0] = setInterval("roll()",20);
}
interval[1] = setInterval("startRoll()",3000);
</script>
</body>
</html>
分享到：
相关推荐
JavaScript跑马灯效果是一种常见的网页动态效果，常用于滚动显示新闻、公告或广告等信息，以节省网页空间并增加视觉吸引力。跑马灯效果通常基于JavaScript实现，通过定时器控制文本或图片在有限的显示区域里循环滚动...
Javascript 跑马灯效果浅析 本文主要介绍了 Javascript 中跑马灯的实现机制，并以此为基础详细介绍了标题跑马灯、状态栏跑马灯、文档跑马灯的实现过程。 知识点1： Javascript 跑马灯的实现机制 Javascript 跑马...
本文将深入探讨如何使用JavaScript来实现跑马灯效果。 首先，我们需要理解跑马灯的基本原理。跑马灯效果通常是通过在一个固定区域显示一组元素（如图片），然后定期或根据用户交互改变显示的元素，形成一种循环滚动...
跑马灯效果通常是通过JavaScript语言来实现的，它可以在页面上创建一个持续滚动或循环展示的内容区域，给人一种类似马灯在转动的视觉效果。 跑马灯的核心原理是利用JavaScript对HTML元素的定位和定时器（setTimeout...
通过以上步骤，我们可以实现一个基本的JavaScript跑马灯效果。具体的代码实现会因需求和设计而异，但上述原理和方法提供了一个通用的框架。在实际项目中，可能还需要考虑性能优化、用户体验等因素，比如使用`...
**jQuery跑马灯效果**是一种常见的网页动态展示技术，它通过自动循环滚动或切换内容，如图片、文字或链接，来吸引用户注意力并提供信息。在网页设计中，这种效果通常用于广告展示、新闻滚动或者产品展示等场景。在本...
div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
现在，我们通常使用JavaScript来实现更加灵活、可控的跑马灯效果。本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟...
在创建图片走马灯时，通常会使用`<div>`元素作为容器，里面包含一系列的`<img>`元素，每张图片对应一个`<img>`标签。由于我们追求的是无缝效果，因此一般会复制第一张图片到序列末尾，以便在轮播结束时与第一张图片...
在这个“html javascript jquery 走马灯例子”中，我们将探讨如何通过HTML、JavaScript（特别是jQuery库）来实现这种效果。 首先，我们从HTML结构开始。`index.htm`文件通常包含了页面的基本结构和元素，如`<head>`...
无缝走马灯的核心在于CSS3的`@keyframes`规则，它定义了一个动画的过程，从一个样式变化到另一个样式。在走马灯效果中，这个过程通常是图片的平滑切换。例如： ```css @keyframes slideShow { 0% { transform: ...
从提供的文件信息中，我们可以提炼出与“javascript 走马灯效果的链接提示”相关联的知识点，这些知识点主要围绕如何在网页中实现动态的走马灯效果以及通过链接提示与用户交互。以下是对这些知识点的详细解释： 1. ...
2. **图片轮播**：JavaScript可以通过定时器（setTimeout或setInterval）实现图片的自动切换，模拟跑马灯效果。每张图片显示一段时间后，自动切换到下一张，形成连续的视觉流动。 3. **鼠标悬停事件**：当鼠标移动...
javascript实现网页状态栏跑马灯效果特效，一个小的积累，不错
跑马灯效果，又称滚动字幕或走马灯，是一种常见的UI设计元素，常用于显示过多信息无法一次性完全展示的情况，如网站公告、新闻标题滚动等。在IT领域，跑马灯效果可以通过多种编程语言和技术来实现。下面，我们将详细...
JavaScript可以监听用户事件（如鼠标悬停）来暂停走马灯，也可以设置定时器实现自动切换。以下是一个简单的JS示例： ```javascript let index = 0; const carousel = document.querySelector('.carousel'); const ...
在IT行业中，"跑马灯文字滚动"是一种常见的视觉效果，尤其在电子显示屏、网站、APP界面设计中经常被用到。它通过让文字或信息像霓虹灯一样连续滚动，来展示大量的信息或者吸引用户的注意力。这个效果通常用于有限的...
走马灯效果是一种常见的网页动态展示技术，常用于轮播图片、文字或其他内容，为用户提供交互式的视觉体验。本教程将详细介绍如何利用HTML的`<div>`元素来实现上下和左右两种不同方向的走马灯效果。 首先，我们来看...
以下是一个简单的JavaScript走马灯实现： 1. 创建HTML结构，包含一个容器div和要在其中滚动的内容： ```html 这是要滚动的内容 ``` 2. 使用CSS设置初始样式，比如宽度、溢出隐藏等： ```css #myMarquee { ...