实现网页标题跳动效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了让title标题跳动起来的效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网欢迎您,本站的url地址是www.pipipi.net</title>
<script type="text/javascript">
var dir = "left";
function scroll() {
  //获取title
  var title = document.title;
  if (dir == "left") {
    //获取title第一个汉字(数字、字母)。
    var firstch = title.charAt(0);
    //获取第二位到最后的信息
    var leftstr = title.substring(1, title.length);
    // 拼接输出信息
    document.title = leftstr + firstch;
  }
  else if (dir == "right") {
    var lastch = title.charAt(title.length - 1);
    var leftstr = title.substring(0, title.length - 1);
    document.title = lastch + leftstr;
  }
  function setDir(d) {
    dir = d;
  }
}
//使用setInterval()方法执行
setInterval("scroll()", 500);
</script>
</head>
<body>
本站编辑器无法正常演示此效果,建议复制黏贴到本地测试
</body>
</html>

上面的代码就是一个比较好的演示效果,代码已经有了注释,这里不多介绍了。

更多内容可以参阅新信息提醒标题闪动实例代码一章节。

回复

我来回复
  • 暂无回复内容