JS实现的滚动最新公告/新闻的代码

2014-05-04 14:50:24 -0400

此代码仅供参考

代码说明

添加说明文字

html代码(一)

html代码(二)

<body>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="15" valign="top"><img src="data:image/gif;base64,R0lGODlhCwALAKIAALtyDP/APv+uCNF7MP///wAAAAAAAAAAACH5BAEAAAQALAAAAAALAAsAAAMgSKoz649AyOpskVEhgHQDJ3qPyIHoEJyZtILLE0yx9iQAOw==" alt="" width="11" height="11" /></td>
    <td width="64">网站通知：</td>
    <td width="321"><script>
var marqueeContent=new Array();   //滚动主题
                  	
marqueeContent[0]='<a href="/" target="_blank">+ 网页代码站 - 最专业的代码下载网站！</a>';
marqueeContent[1]='<a href="/" target="_blank">+ 显而易见，最高的效率就是对现有材料的最佳利用。</a>';
marqueeContent[2]='<a href="/" target="_blank">+ 自己能解决的事，别花钱，花钱能解决的事，别求人。</a>';
marqueeContent[3]='<a href="/" target="_blank">+ 旅行是需要一种心情，更重要的是，需要一种冲动。</a>';
marqueeContent[4]='<a href="/" target="_blank">+ 随时用零碎的时间(如等人、排队等)做零碎的事情。</a>';

html代码(三)

.gg_icon { float: left; margin-right: 6px; width: 17px; height: 25px; background:url(/down/417752/bulletin.gif) no-repeat; background-position: center right; background-size: 100%;}

.gonggao { float: left; line-height: 25px; font-style: initial; font-size: 14px; font-size: 0.875rem;}

#scrollDiv { overflow: auto;}

.scrollText { float: left; width: auto; min-height: 25px; line-height: 25px; text-align: left; overflow: hidden;}

.font color { color: #6b3612;}
/* 公告 end */
</style>

<div class="bulletin">
	<div class="gg_icon"></div>
	<div class="gonggao">公告：</div>
	
	<div id="scrollDiv">
		<div class="scrollText">
<script type="text/javascript">
var marqueeContent = new Array(); //定义活动字幕信息
marqueeContent[0] = '<font class="color">每天记录一点点学到的知识!</font><br>';
marqueeContent[1] = '<font class="color">12.4 修复了浏览器兼容问题.</font><br>';
marqueeContent[2] = '<font class="color">还没加载完? 刷新下试试看吧.</font><br>';
marqueeContent[3] = '<font class="color">.</font><br>';
marqueeContent[4] = '<font class="color">偶尔有空的时候进来写写代码.</font><br>';
marqueeContent[5] = '<font class="color">写出好的前端代码不是件容易的事.</font><br>';
marqueeContent[6] = '<font class="color">首页基本写好了，找个时间排下内页.</font><br>';
marqueeContent[7] = '<font class="color">请各位友友发表下自己的意见或建议!</font><br>';
marqueeContent[8] = '<font class="color">刚刚发现很有用的帖子，在此学习了!</font><br>';
marqueeContent[9] = '<font class="color">今天主要掌握了这些，明天继续加油.</font><br>';
marqueeContent[10] = '<font class="color">网页设计的工作量大，需要慢慢优化.</font><br>';
var marqueeInterval = new Array(); //定义活动字幕变量
var marqueeId = 0;
var marqueeDelay = 3000; //设定活动字幕间断时间(毫秒)
var marqueeHeight = 25; //设定活动字幕的高度
//接下来的是定义一些要使用到的函数
function initMarquee() {
	var str = marqueeContent[0];
	document.write('<div id=marqueeBox style="overflow:hidden;height:' + marqueeHeight + 'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>' + str + '</div></div>');
	marqueeId++;
	marqueeInterval[0] = setInterval("startMarquee()", marqueeDelay);
}

function scrollMarquee() {
	marqueeBox.scrollTop++;
	if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight)) {
		clearInterval(marqueeInterval[1]);
	}
}
initMarquee();
</script>
		</div>
	</div>
	
</div>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N