余志国网站设计工作室是专业从事义乌做网站、义乌网站制作、义乌网站建设、义乌外贸网站制作、义乌网站设计的专业义乌网站设计工作室,是义乌网站建设专家!    
余志国网站设计工作室LOGO
义乌网页设计师博客

兼容IE和Firefox火狐的上下、左右循环滚动JS代码

程序开发 字体：【大】 【中】 【小】 浏览（257）来源：余志国 发布时间：2010-7-9 22:28:25
html里的marqueen也能实现内容的滚动，但滚动是间断的，在滚动一个周期中，会有一段空白出现。如果滚动的区域比较大，空间的出现，会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观，实现无间断的滚动。

上下循环滚动代码：
 
  1. <div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px">
  2.  
  3. <div id="demo1">
  4. 111111111111111<br>
  5. 222222222222222<br>
  6. 333333333333333<br>
  7. 444444444444444<br>
  8. 555555555555555
  9. </div>
  10.  
  11. <div id="demo2"></div>
  12.  
  13. </div>
  14.  
  15.  
  16. <script>
  17. var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");
  18. var inter;
  19. t2.innerHTML=t1.innerHTML;
  20. function qswhMarquee(){
  21. if(t2.offsetTop<=t.scrollTop)
  22. t.scrollTop-=t1.offsetHeight;
  23. else
  24. t.scrollTop++;
  25. }
  26. inter=setInterval(qswhMarquee,30);
  27. function getid(id){
  28. return document.getElementById(id);
  29. }
  30. </script>

文字左右循环滚动代码：
 
  1.  
  2. <style type="text/css" media="all">
  3. .d1{
  4. margin:10px auto;
  5. width:200px;
  6. background-color:#CCCCCC;
  7. height:20px;
  8. overflow:hidden;
  9. white-space:nowrap;
  10. }
  11. .d2{
  12. margin:0px auto;
  13. background-color:#FF9933;
  14. }
  15. .div2{
  16. width:auto;
  17. height:20px;
  18. font-size:12px;
  19. }
  20. </style>
  21.  
  22. <script language="javascript" type="text/javascript">
  23. var s,s2,s3,s4,timer,i=0;
  24. function init(){
  25. s=getid("div1");
  26. s2=getid("div2");
  27. s3=getid("div3");
  28. s4=getid("div4");
  29. s4.innerHTML=s3.innerHTML;
  30. s2.style.width=s.offsetWidth+"px";
  31. s2.style.height=s.offsetHeight+"px";
  32. timer=setInterval(mar,30)
  33. }
  34. function mar(){
  35. //s2.innerHTML=s.scrollLeft;
  36. if(s3.offsetWidth<=s.scrollLeft){
  37. s.scrollLeft-=s3.offsetWidth;
  38. }else{s.scrollLeft++;}
  39. }
  40. function getid(id){
  41. return document.getElementById(id);
  42. }
  43. window.onload=init;
  44. </script>
  45.  
  46.  
  47. <div class="d1" id="div1">
  48.  
  49.     <span class="div2" id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span>
  50.  
  51.     <span id="div4" class="div2"></span>
  52.  
  53. </div>
  54.  
  55. <div class="d2" id="div2"></div>

[上一篇：图片自动按宽高比例缩小的js代码]
[下一篇：兼容IE和Firefox火狐的DIV垂直居中及容器内图片垂直居中的CSS代码]
同类热门文章推荐
· ASP数据库连接、显示、添加、删除、查询等简单操作教程
· 利用ASP显示当前网站在线人数代码
· 一个空间/虚拟主机放置多个网站的转向代码（多个域名绑定一个空间）
· 网页加密攻略:使用ASP程序密码锁
· asp如何读取txt文本内容代码
· 中国十大ASP CMS系统介绍
· ASP经常用到的代码，比较全，不可不看！
· ASP几种常见分页代码
· 1小时ASP入门，教你简单学会ASP
· ASP生成静态页面HTML的方法
本站热门文章排行
· 李阳疯狂英语下载：视频演讲 发音 句子 口语 单词 对话 句型 语法 音标 听力 cet4 电子书
· QQ空间免费物品、QQ空间4.0皮肤、欢迎动画、领养五级植物、播放器、挂件、导航、漂浮物、鼠标、公告栏
· 余世维博士讲座全集清晰版HTTP免费下载
· 教你如何点亮QQ图标?怎样免费点亮QQ全部图标?
· 走遍美国下载(走遍美国文本、走遍美国MP3、走遍美国视频下载)
· 陈安之视频讲座全集免费下载地址，想提高自己能力的快下！
· 2009最新最全QQ空间免费物品大全（物品名称:开场动画、免费皮肤、导航、音乐播放器）
· 交谊舞视频教程大全,免费下载，泡妞必学(狐步、慢四、华尔兹、快三、伦巴、恰恰)
· 如何免费点亮、关闭熄灭QQLive图标？
· 如何免费点亮、关闭熄灭QQ腾讯图书图标？
站内搜索： 关键词：英语 疯狂英语 免费 QQ空间 ASP 教程 讲座 余世维 陈安之 李阳
发表文章评论
名称： *
邮箱：
Q Q ：
网站：
内容： * 共可输入250字，还剩字。
验证：
还没有评论，快抢沙发...