<!--
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>跑马灯</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; }
#mq { width:220px; height:40px; line-height:20px; overflow:hidden; border:1px solid black; }
#mq div { position:absolute; width:220px; padding:0px 10px; }
</style>
<script type="text/javascript" >
var scrlSpeed=1
// decreasing speed for mozilla
scrlSpeed=(document.all)? scrlSpeed : Math.max(1, scrlSpeed-1)
function initScroll(container,object){
if (document.getElementById(container) != null){
var contObj=document.getElementById(container);
var obj=document.getElementById(object);
contObj.style.visibility = "visible";
contObj.scrlSpeed = scrlSpeed;
widthContainer = contObj.offsetWidth;
obj.style.left=parseInt(widthContainer)+"px";
widthObject=obj.offsetWidth;
interval=setInterval("objScroll('"+ container +"','"+ object +"',"+ widthContainer +")",20);
contObj.onmouseover = function(){
contObj.scrlSpeed=0;
}
contObj.onmouseout = function(){
contObj.scrlSpeed=scrlSpeed;
}
}
}
function objScroll(container,object,widthContainer){
var contObj=document.getElementById(container);
var obj=document.getElementById(object);
widthObject=obj.offsetWidth;
if (parseInt(obj.style.left)>(widthObject*(-1))){
obj.style.left=parseInt(obj.style.left)-contObj.scrlSpeed+"px";
} else {
obj.style.left=parseInt(widthContainer)+"px";
}
}
// on page load we initiate scrolling
window.onload=function(){
initScroll("scrlContainer", "scrlContent");
}
</script>
<style type="text/css">
body{
margin:0;
padding:0;
background:#fff;
font: 70% Arial, Helvetica, sans-serif;
}
#scrlContainer{
visibility:hidden;
background:#f1f1f1;
position:relative;
overflow:hidden;
width:250px;
height:20px;
line-height:20px;
margin:1em;
}
#scrlContent{
position:absolute;
left:0;
top:0;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="scrlContainer">
<div id="scrlContent">Some very, very useful information will
appear here, yet it will move around your screen so it will be hard to
read it. But the client wants it, so here it is. </div>
</div>
</body>
</html>
-->
<DIV id=demo style="overflow:hidden;height :80px;width :224px;background-color:green;color:#ffffff;
" align=center>
<DIV id=demo1>
<!-- 定义图片 -->
1111111111111111111111
1111111111111111111111
1111111111111111111111
1111111111111111111111
1111111111111111111111
1111111111111111111111
1111111111111111111111
1111111111111111111111
</DIV>
<DIV id=demo2>
</DIV>
</DIV>
<SCRIPT>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>
分享到：
相关推荐
在Unity游戏引擎中，跑马灯效果是一种常见的UI动态效果，通常用于滚动显示文本或图像。这个效果在很多游戏和应用中都能见到，比如显示排行榜、公告或者新闻更新。本教程将详细介绍如何使用C#脚本来实现这一效果，并...
**jQuery跑马灯效果**是一种常见的网页动态展示技术，它通过自动循环滚动或切换内容，如图片、文字或链接，来吸引用户注意力并提供信息。在网页设计中，这种效果通常用于广告展示、新闻滚动或者产品展示等场景。在本...
【Qt实现的跑马灯效果】是一种常见的GUI编程技术，主要应用于信息滚动显示，常见于电子显示屏、信息提示框等场景。Qt是一个跨平台的C++图形用户界面应用程序开发框架，它提供了丰富的API和工具，使得开发者能够方便...
在Delphi中实现透明跑马灯效果涉及到图形用户界面（GUI）编程，特别是与控件、事件处理和自定义绘图相关的技术。跑马灯效果通常是指文本或图像在界面上按照某种方式循环滚动，而透明则涉及到控件的背景处理和颜色...
在Android开发中，"文字跑马灯效果"是一种常见的用户界面设计，主要用于显示较长的文本内容，当空间有限时，可以实现文本的自动循环滚动，给人一种动态的效果，类似传统电子显示屏上的跑马灯。这种效果通常用在通知...
【跑马灯效果】在Android开发中，通常指的是TextView中的滚动文字效果，也称为Marquee效果，这种效果会让过长的文字在控件宽度内不断滚动，就像跑马灯一样。在老罗的视频中，他可能讲解了如何通过代码实现这一效果。...
设置合适的滚动速度和间隔时间，可以模拟出连续、平滑的跑马灯效果。 3. 两种效果： - 每次移动距离是一个item的高度：这可以通过计算出item高度并作为滚动距离来实现。在自定义LayoutManager中，获取item高度，...
Swift中的跑马灯效果通常指的是文字或图片在视图中循环滚动的现象，这种效果常见于广告栏或通知提示。在iOS开发中，我们可以自定义一个UIView子类来实现这一功能。这里，我们关注的文件是`MarqueeView.swift`，它...
跑马灯效果可以让文本在文本框内循环滚动，给人一种连续阅读的视觉感受，尤其适用于标题或提示信息的展示。 本教程主要围绕如何在Android中使用`TextView` 实现跑马灯效果展开。首先，我们需要了解`TextView` 的...
跑马灯效果，又称滚动字幕或走马灯，是一种常见的UI设计元素，常用于显示过多信息无法一次性完全展示的情况，如网站公告、新闻标题滚动等。在IT领域，跑马灯效果可以通过多种编程语言和技术来实现。下面，我们将详细...
标题提到的"android跑马灯效果，失去焦点也可以实现"意味着即使控件没有获取到焦点，仍然可以保持滚动效果。这在设计用户界面时特别有用，因为有时候我们希望信息能够持续吸引用户的注意力，而不仅仅是当用户交互时...
在Android开发中，实现文字跑马灯效果是一种常见的动态UI设计，可以吸引用户注意力并提供信息展示。本示例——"Android 实现水平、垂直方向文字跑马灯效果demo"，将详细介绍如何在Android应用中创建这样的效果。跑马...
在Android开发中，"跑马灯效果的图片变换"是一种常见的动画效果，它通常用于创建引人注目的视觉展示，比如广告轮播、通知提示或者界面装饰等。这种效果通过连续切换图片，使得图片看起来像在移动，形成一种动态流动...
要实现TextView的跑马灯效果，通常需要结合Android的属性和自定义布局来完成。以下是详细步骤和相关知识点： 1. **设置Ellipsize属性**： TextView有一个名为`ellipsize`的属性，它允许我们在文本过长时添加省略号...
在前端开发中，跑马灯效果是一种常见的动态展示方式，常用于新闻滚动、广告轮播等场景。在HTML5时代，`<marquee>`标签曾是实现这种效果的简便手段，但由于它缺乏语义化、性能不佳且不支持现代Web标准，逐渐被淘汰。...
跑马灯效果，通常在移动应用开发中用于显示滚动文本，尤其当文本内容过多无法一次性完全展示时。在iOS开发中，我们可以利用UILabel这一UI组件来实现这种效果。本篇文章将详细探讨如何在iOS中创建跑马灯效果，以及...
jQuery无缝滚动跑马灯效果是一种常见的网页动态展示技术，它利用JavaScript库jQuery的高效特性，为网站添加一种吸引用户注意力的视觉效果。这种效果通常应用于新闻更新、广告展示或者产品介绍等区域，使得信息能够以...
"跑马灯效果"（Marquee）是TextView的一种特殊滚动效果，它允许文本在TextView的边界内无限循环滚动，给人一种连续移动的视觉效果。 实现TextView的跑马灯效果主要涉及到以下知识点： 1. **属性设置**： - `...
跑马灯效果是一种常见的网页动态展示方式，常用于新闻标题滚动、广告轮播等场景。在JavaScript中实现跑马灯，主要涉及到定时器、数组、DOM操作和CSS样式控制等技术。下面我们将深入探讨如何使用JavaScript来实现这种...