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.οnmοuseοver=function() {clearInterval(MyMar1)} 鼠标移进
FGDemo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed)} 鼠标移出
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值