走马灯效果

最新推荐文章于 2018-06-25 16:01:32 发布

iteye_20659

最新推荐文章于 2018-06-25 16:01:32 发布

阅读量84

点赞数

文章标签： xhtml java javascript ViewUI

本文将介绍如何使用HTML和JavaScript实现一种简单的滚动文字效果。通过设置div元素的位置和大小，结合JavaScript定时器，可以创建动态滚动的文字显示。这种方法适用于网页中需要展示连续文本信息或动态广告的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>
		<title>test</title>
	</head>
	<body>
		<div id="maq" style="overflow: hidden; width: 150px; height: 180px">
			<div id="mtext">
				家富富侨 莎蔓莉莎美容院 喜唰唰香辣涮 晶华摄影 法国梧桐咖啡厅 雅玫美容院 花样年华 藏御火疗宫 维多俐娅咖啡厅 大众口腔
				7天连锁酒店 邦吉咖啡 三只耳 太极虎韩式儿童摄影
			</div>
			<div id="m0"></div>
		</div>
		<script language="javascript">
			var speed=40; //调整滚动速度
			m0.innerHTML=mtext.innerHTML;
			function Marquee(){
				if(m0.offsetTop-maq.scrollTop<=0)
					maq.scrollTop-=mtext.offsetHeight;  
				else{
					maq.scrollTop++;
				}
			}
			var MyMar=setInterval(Marquee,speed);
			maq.οnmοuseοver=function() {
				clearInterval(MyMar);
			}
			maq.οnmοuseοut=function() {
				MyMar=setInterval(Marquee,speed);
			}
		</script>
	</body>
</html>