js关于文字上下滚动的详细讲解

需要3个div容器，一个是父容器，需要设置它的高度，还有超出属性为隐藏，注意高度不能超过滚动内容的高度，不然不会又效果哦（如果是上下滚的话），还有两个div，其中第一个用来放滚动内容，第二个只要定义一下就行，之后可以在js中调用，并给它赋值第一个的内容；简单的例子如下

#Content3{ height:200px; overflow:hidden;}父容器css样式设置

<div id="Content3">

<div id="demo1">

<ul id="slider" class="slider">

<li style="overflow:hidden">

<a href="#" target="_blank" class="blue-2E657C">> 8-13日</a>

<a href="#"><h3 class="Black666666">精彩活动预告！2011年9月9日厦门又一城将全新亮相杭州展会，欢迎电商朋友们届时到场参观指导。</h3></a>

</li>

<li>

<a href="#" target="_blank" class="blue-2E657C">> 8-14日</a><a href="#"><h3 class="Black666666">精彩活动预告！2011年9月9日厦门又一城将全新亮相杭州展会，欢迎电商朋友们届</h3></a>

</li>

<li>

<a href="#" target="_blank" class="blue-2E657C">> 8-13日</a>

<a href="#"><h3 class="Black666666">　软泥上的青荇，油油的在水底招摇；在康河的柔波里，我甘心作一条水草</h3></a>

</li>

<li>

<a href="#" target="_blank" class="blue-2E657C">> 8-15日</a><a href="#"><h3 class="Black666666">那榆荫下的一潭，不是清泉是天上的虹；揉碎在浮藻间，沉淀彩虹似的梦。</h3></a></li>

<li>

<a href="#" target="_blank" class="blue-2E657C">> 8-13日</a>

<a href="#"><h3 class="Black666666">寻梦，撑支长篙，向青草更青处漫溯；</h3></a>

</li>

<li>

<a href="#" target="_blank" class="blue-2E657C">> 8-18日</a><a href="#"><h3 class="Black666666">精彩活动预告！2011年9月9日厦门又一城将全新亮相杭州展会，欢迎电商朋友们届时到场参观指导。</h3></a></li>

</ul>

</div><div id="demo2"></div>

</div>

js代码

<script language="javascript" type="text/javascript">

var speed=40; 滚动速度

var FGDemo=document.getElementById('Content3'); 获取父容器

var FGDemo1=document.getElementById('demo1'); 获取第一个div

var FGDemo2=document.getElementById('demo2'); 获取第二个

FGDemo2.innerHTML=FGDemo1.innerHTML 给第二个div赋值

function Marquee1(){

if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)

FGDemo.scrollTop-=FGDemo1.offsetHeight

else{

FGDemo.scrollTop++

}

}

var MyMar1=setInterval(Marquee1,speed)

FGDemo.onmouseover=function() {clearInterval(MyMar1)} 鼠标移进

FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} 鼠标移出

</script>