用DOM的setInterval()写走马灯效果

胖胖爱家

于 2011-09-12 12:45:59 发布

阅读量630

点赞数

分类专栏： js / jq / vue 文章标签： scroll button xhtml html

本文链接：https://blog.csdn.net/yual365/article/details/6768858

版权

这个示例展示了如何利用JavaScript DOM的setInterval()方法创建一个走马灯效果。通过不断改变网页标题，实现了文字的滚动展示。用户可以通过点击‘滚动’按钮启动走马灯，点击‘停止滚动’按钮来停止滚动。每0.5秒，标题中的第一个字符会被移至末尾，从而形成连续滚动的视觉效果。

摘要由CSDN通过智能技术生成

<!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>
<script type="text/javascript">
function scroll(){
//获取标题
var title=document.title;
//charAt() 方法可返回指定位置的字符。
var firstch = title.charAt(0);
//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
var leftstr = title.substring(1,title.lenght);
document.title = leftstr + firstch;
}