使用JavaScript实现一行文字在网页底部从右到左循环滚动的效果,当把鼠标放至滚动文字中则文字暂停滚动,当把鼠标移出文字范围则文字继续滚动。(提示:采用marquee标签实现文字滚动,direction属性设置为left,width属性设置为100%;所有文字全部写在一行,不要多行,文字颜色为红色,文字大小设置为20px;可以用之前学过的Div+CSS布局方法将滚动文本设置到网页底部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字循环滚动效果</title>
<style type="text/css">
#container {
width: 100%;
margin: 0 auto;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function() {
var marquee = document.getElementById("myMarquee");
marquee.onmouseover = function() {
this.stop();
};
marquee.onmouseout = function() {
this.start();
};
};
</script>
</head>
<body>
<div id="container">
<marquee id="myMarquee" direction="left" width="100%" style="color: red; font-size: 20px;">
这里是滚动文字!这里是滚动文字!这里是滚动文字!这里是滚动文字!这里是滚动文字!这里是滚动文字!这里是滚动文字!
</marquee>
</div>
</body>
</html>