注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

背归鸿

博闻强记,厚积薄发!

 
 
 

日志

 
 

js 上下滚动特效  

2013-02-06 15:42:38|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

css部分

#main_text{width:500px; margin:auto; height:240px; overflow:hidden;padding:5px;border:#000 1px solid;}
#main_text1{ width:500px; float:left; }
#main_text2{ width:500px; float:left;}
.text{ width:500px; float:left; height:80px; border:#666 1px solid; cursor:pointer;}
.text .text_left{ width:100px; background:#FF0; height:50px; float:left; font-size:20px; text-align:center; padding-top:30px;}
.text .text_right{ width:400px; background:#0C9; height:50px; float:left;font-size:20px; text-align:center; padding-top:30px;}

html部分

<div id="main_text">
<div id="main_text1">
<div>
<div>测试内容1</div>
<div>测试内容2</div>
</div>
<div>
<div>测试内容1</div>
<div>测试内容2</div>
</div>
<div>
<div>测试内容1</div>
<div>测试内容2</div>
</div>
<div>
<div>测试内容1</div>
<div>测试内容2</div>
</div>
</div>
<div id="main_text2"></div>
</div>

js部分

<script type="text/javascript">
var speed=30 //值越大速度越慢
var tab=document.getElementById("main_text");
var tab1=document.getElementById("main_text1");
var tab2=document.getElementById("main_text2");
tab2.innerHTML=tab1.innerHTML //克隆tab1为tab2

function Marquee(){
//向上滚动
if(tab2.offsetTop-tab.scrollTop<=0) //当滚动至tab1与tab2交界时
tab.scrollTop-=tab1.offsetHeight //tab跳到最顶端
else{
tab.scrollTop++
}

//向下滚动
//if(tab1.offsetTop-tab.scrollTop>=0)
//tab.scrollTop+=tab2.offsetHeight
//else{
//tab.scrollTop–
//}

}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseover=function() {clearInterval(MyMar);
}
//鼠标移开时重设定时器
tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

  评论这张
 
阅读(304)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017