码迷,mamicode.com
首页 > Web开发 > 详细

让网页文字定时交替出现的Js代码

时间:2014-08-12 13:55:15      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:background   contain   nowrap   border   hidden   

  • 让LI列表中的文字一行一行交替出现,每一行停留数秒后自动转到下一行显示,使用灵活,JS代码非常精简,推荐学习参考和使用。这里给LI设置line-height属性以便控制内容溢出。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE>文本定时切换</TITLE>

  <style type="text/css">

 #newslist{

  background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:80px;

 }

 #contain{

  font-size:12px;overflow:hidden;list-style:none;width:80px;height:20px;margin:0px;padding:0;

 }

 #contain li{

  height:20px;line-height:20px;white-space:nowrap;overflow:hidden;padding-left:5px;

 }

</style>

 </HEAD>


 <BODY>

 <div id="newslist">

  <ul id="contain">

<li><a href="/sort/list_2_34_1.shtml">聊天留言</a></li><li><a href="/sort/list_2_35_1.shtml">企业建站</a></li><li><a href="/sort/list_2_36_1.shtml">论坛社区</a></li><li><a href="/sort/list_2_37_1.shtml">新闻文章</a></li><li><a href="/sort/list_2_52_1.shtml">CMS系统</a></li><li><a href="/sort/list_2_53_1.shtml">博客日记</a></li><li><a href="/sort/list_2_51_1.shtml">影音视频</a></li>

  </ul>

 </div>

<SCRIPT LANGUAGE="JavaScript">

function xx(){

var container=document.getElementById("contain");

container.appendChild(container.firstChild);

}

setInterval("xx()",3000);

</SCRIPT>

 </BODY>

</HTML>


让网页文字定时交替出现的Js代码,布布扣,bubuko.com

让网页文字定时交替出现的Js代码

标签:background   contain   nowrap   border   hidden   

原文地址:http://chunzhisu.blog.51cto.com/9123977/1538906

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!