div+css不间断上下滚动模板

div+css不间断上下滚动模板

这里会用到js，这里直接拷贝使用即可。
常常我们会看见别人网页上使用上下不间断文字特效来展示公告、广告等内容，接下来我们将此css模板给大家。

效果图如下
div+css不间断滚动CSS代码最终效果演示图
不间断滚动代码效果图

CSS 代码如下：

<style type="text/css">
/* CSS代码如下 www.divcss5.com */
body{ margin:0; padding:0; text-align:center; font-size:12px;}/* 设置网页内容居中及字体大小 */
.modu{ margin:10px auto; height:15px; text-align:left; line-height:15px; width:400px;}/* 设置居中的“modu”宽度、高度文字局左等CSS属性选择器这里的高度要与JS里的高度一致，以免滚动就会造成因高度不一致而使网页错位 */
.modu img{ vertical-align:middle;}
.lf{ float:left; width:80px;}/* 设置局左浮动 */
.rt{ float:right; width:315px; overflow:hidden;}/* 设置局右浮动 */
</style>

说明以上CSS代码设置了一个box“modu”，然后内部分为左右结构，左边是“滚动消息”标题(lf)，右边是滚动内容（rt），直接放入html网页里的头部标签“head”即可。

Html代码：

 <p>&nbsp;</p> 
<p>divcss5模板-上下不间断滚动<a href="http://www.divcss5.com/">DIV+CSS</a></p> 
<div class="modu"> 
<div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滚动消息：</div> 
<div class="rt"> 
<script type="text/javascript"> 
var marqueeContent=new Array(); //滚动主题 
 
marqueeContent[0]='<a href="http://www.divcss5.com/" target="_blank">
+ CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
+ 显而易见，最高的效率就是对现有材料的最佳利用。</a>'; 
marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
+ 自己能解决的事，别花钱，花钱能解决的事，别求人。</a>'; 
marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
+ 旅行是需要一种心情，更重要的是，需要一种冲动。</a>'; 
marqueeContent[4]='<a href="http://www.divcss5.com/" target="_blank">
+ 随时用零碎的时间(如等人、排队等)做零碎的事情。</a>'; 
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 
var marqueeId=0; 
var marqueeDelay=4000; 
var marqueeHeight=15;//注意这里设置每次滚动高度 
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 startMarquee() { 
var str=marqueeContent[marqueeId]; 
marqueeId++; 
if(marqueeId>=marqueeContent.length) marqueeId=0; 
if(marqueeBox.childNodes.length==1) { 
var nextLine=document.createElement('DIV'); 
nextLine.innerHTML=str; 
marqueeBox.appendChild(nextLine); 
} 
else { 
marqueeBox.childNodes[0].innerHTML=str; 
marqueeBox.appendChild(marqueeBox.childNodes[0]); 
marqueeBox.scrollTop=0; 
} 
clearInterval(marqueeInterval[1]); 
marqueeInterval[1]=setInterval("scrollMarquee()",10); 
} 
function scrollMarquee() { 
marqueeBox.scrollTop++; 
if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
clearInterval(marqueeInterval[1]); 
} 
} 
initMarquee(); 
</script> 
</div> 
</div>

说明：以上内容放置在html的body内的div代码及JS，这里不介绍JS，直接按位置拷贝即可使用。

最后综合完整的div+css滚动模板网页源代码如下：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta content="" name="keywords" /> 
<title>文字滚动消息广告代码,广告代码下载-www.divcss5.com</title> 
<style type="text/css"> 
/* CSS代码如下 www.divcss5.com */ 
body{ margin:0; padding:0; text-align:center; font-size:12px;} 
.modu{ margin:10px auto; height:15px; text-align:left;
line-height:15px; width:400px;} 
.modu img{ vertical-align:middle;} 
.lf{ float:left; width:80px;} 
.rt{ float:right; width:315px; overflow:hidden;} 
</style> 
</head> 
<body> 
<p>&nbsp;</p> 
<p>divcss5模板-上下不间断滚动<a href="http://www.divcss5.com/">DIV+CSS</a></p> 
<div class="modu"> 
<div class="lf"><img src="images/news.gif" alt="" width="11" height="11" /> 滚动消息：</div> 
<div class="rt"> 
<script type="text/javascript"> 
var marqueeContent=new Array(); //滚动主题 
 
marqueeContent[0]='<a href="http://www.divcss5.com/" target="_blank">
+ CSS学习网,DIV+CSS基础系统掌握CSS</a>'; 
marqueeContent[1]='<a href="http://www.divcss5.com/" target="_blank">
+ 显而易见，最高的效率就是对现有材料的最佳利用。</a>'; 
marqueeContent[2]='<a href="http://www.divcss5.com/" target="_blank">
+ 自己能解决的事，别花钱，花钱能解决的事，别求人。</a>'; 
marqueeContent[3]='<a href="http://www.divcss5.com/" target="_blank">
+ 旅行是需要一种心情，更重要的是，需要一种冲动。</a>'; 
marqueeContent[4]='<a href="http://www.divcss5.com/" target="_blank">
+ 随时用零碎的时间(如等人、排队等)做零碎的事情。</a>'; 
 
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 
var marqueeId=0; 
var marqueeDelay=4000; 
var marqueeHeight=15; 
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 startMarquee() { 
var str=marqueeContent[marqueeId]; 
marqueeId++; 
if(marqueeId>=marqueeContent.length) marqueeId=0; 
if(marqueeBox.childNodes.length==1) { 
var nextLine=document.createElement('DIV'); 
nextLine.innerHTML=str; 
marqueeBox.appendChild(nextLine); 
} 
else { 
marqueeBox.childNodes[0].innerHTML=str; 
marqueeBox.appendChild(marqueeBox.childNodes[0]); 
marqueeBox.scrollTop=0; 
} 
clearInterval(marqueeInterval[1]); 
marqueeInterval[1]=setInterval("scrollMarquee()",10); 
} 
function scrollMarquee() { 
marqueeBox.scrollTop++; 
if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ 
clearInterval(marqueeInterval[1]); 
} 
} 
initMarquee(); 
</script> 
</div> 
</div> 
</body> 
</html>