上次看一帖子,说百度面试出了一个走马灯.自己随便写了一个,记录下来.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{
margin:0 0;
padding:0 0;
}
#outDemo{
overflow:hidden;
width:200px;
border:2px solid #e0e0e0;
padding:2px;
}
#outDemo div{
float:left;
padding:1px;
}
#innDemo{
white-space:nowrap;
}
img{
border:0px solid #fff;
}
</style>
<script type="text/javascript">
window.onload = function(){
var demo = document.getElementById("outDemo");
var demo1 = document.getElementById("innDemo");
demo1.innerHTML += demo1.innerHTML;
function move(){
demo.scrollLeft = demo.scrollLeft==240?demo.scrollLeft=1:demo.scrollLeft+1;
}
function go(){
setInterval(move,20);
}
go();
}
</script>
</head>
<body>
<div id='outDemo'>
<div id='innDemo'>
<a href='javascript:;'><img src="images/apple439.PNG" alt="apple439.PNG" width="111px" /></a>
<a href='javascript:;'><img src="images/apple440.PNG" alt="apple440.PNG" width="111px" /></a>
</div>
</div>
</body>
</html>
分享到：
相关推荐
跑马灯效果，又称为滚动文字或走马灯，是指内容在一个固定区域内不断循环滚动，仿佛文字或图像在背景上移动。在Unity中，这种效果可以通过改变物体的位置或大小来实现。对于文本跑马灯，我们可以使Text组件的锚点...
在本案例中，我们将探讨一个名为"cxScroll"的jQuery插件，它可以帮助我们实现简单的无缝滚动跑马灯效果。 **jQuery基础**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax...
要实现跑马灯效果，首先需要在XML布局文件中设置`TextView`的相关属性。关键属性包括： - `android:singleLine="true"`：限制`TextView`只显示一行文本。 - `android:ellipsize="marquee"`：开启跑马灯效果，当...
这个简明的HTML+CSS图片无缝走马灯效果适用于快速创建简单的轮播效果。然而，对于更复杂的需求，如添加导航按钮、自动播放控制和图片预加载等功能，你可能需要引入更高级的库，如Bootstrap的Carousel组件或Slick ...
跑马灯效果，也称为滚动文本或走马灯，是一种常见的UI设计元素，用于在有限的空间内展示大量的文字或信息。这种效果使得内容能够像马灯一样连续不断地循环滚动，提高了信息的展示效率。在网页、应用程序或软件中，...
Vue 实现简单跑马灯效果 Vue.js 是一个流行的前端框架，用于构建用户界面和单页应用程序。在本文中，我们将介绍如何使用 Vue 实现简单的跑马灯效果。 知识点1：Vue 实现跑马灯效果 要实现跑马灯效果，我们需要...
走马灯效果是一种常见的计算机图形显示技术，常用于滚动显示文本或图像，模拟传统物理走马灯的效果。在 Delphi 开发环境中，实现走马灯功能可以为应用程序增添动态展示和信息传递的能力。本篇文章将深入探讨如何在 ...
"跑马灯效果"（Marquee）是TextView的一种特殊滚动效果，它允许文本在TextView的边界内无限循环滚动，给人一种连续移动的视觉效果。 实现TextView的跑马灯效果主要涉及到以下知识点： 1. **属性设置**： - `...
在这个"简单的走马灯效果"项目中，我们主要探讨如何利用HTML语言实现一个基本的走马灯功能，包括停顿和无缝滚动的效果。 首先，HTML（HyperText Markup Language）是网页内容的基础结构语言，它定义了网页的各个...
Swift中的跑马灯效果通常指的是文字或图片在视图中循环滚动的现象，这种效果常见于广告栏或通知提示。在iOS开发中，我们可以自定义一个UIView子类来实现这一功能。这里，我们关注的文件是`MarqueeView.swift`，它...
下面将详细介绍如何在Delphi中创建一个简单的走马灯效果。 首先，我们需要了解走马灯的基本原理。走马灯效果通常是通过逐行或逐列移动图像来实现的，给人一种图像在滚动或循环播放的视觉感受。在Delphi中，我们可以...
以下是一个简单的示例代码，展示了如何创建跑马灯效果： ```swift import UIKit class ViewController: UIViewController { @IBOutlet weak var marqueeLabel: UILabel! override func viewDidLoad() { super...
本教程将深入讲解如何使用jQuery库来实现一个简单的图片跑马灯效果。 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。通过jQuery，开发者可以更加便捷地...
在本案例中，我们讨论的是一个简单的向上滚动的跑马灯效果，用户还可以自定义滚动的时间间隔。 要实现这样的跑马灯效果，开发者通常会利用HTML、CSS和JavaScript这三种核心技术。下面将分别介绍这些技术在跑马灯...
JavaScript跑马灯效果是一种常见的网页动态效果，常用于滚动显示新闻、公告或广告等信息，以节省网页空间并增加视觉吸引力。跑马灯效果通常基于JavaScript实现，通过定时器控制文本或图片在有限的显示区域里循环滚动...
跑马灯效果通常用于显示长度超过视图宽度的文本，使得文本能够持续滚动，给用户带来动态视觉体验。 标题和描述中提到的“跑马灯效果”是指在`TextView`中，当文本内容过长无法完全显示时，文本会从一侧滚动到另一侧...
在IT行业中，滚动消息和跑马灯效果是常见的UI设计元素，主要用于展示动态信息或吸引用户的注意力。这种效果常被应用于新闻网站、广告横幅、移动应用通知等场景。本篇将深入探讨“滚动消息跑马灯效果”的实现原理、...
在本案例中，我们讨论的是如何在安卓应用中实现一个简单的跑马灯效果。这个效果可以应用于各种场景，如通知、广告栏等，为用户界面增添动态感。 首先，我们要了解安卓中的`TextView`控件，它是用来显示文本的基础...
本文将深入探讨如何使用JavaScript来实现跑马灯效果。 首先，我们需要理解跑马灯的基本原理。跑马灯效果通常是通过在一个固定区域显示一组元素（如图片），然后定期或根据用户交互改变显示的元素，形成一种循环滚动...
首先，我们需要了解跑马灯效果的基本原理。跑马灯是一种文字或图像在屏幕边缘循环滚动的效果，常用于有限空间内展示大量信息。在游戏场景中，通常会出现在游戏主界面的顶部或底部。 1. **实现跑马灯效果**： - **...