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

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

分类:程序开发 Tags: 兼容浏览器 javascript 评论:1 浏览:5481 最近更新时间: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>

本文地址:https://www.yuzhiguo.com/477/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:54.147.29.160,来自:
@小黑白
@小黑白 : 兼容IE和Firefox火狐的DIV垂直居中及容器内图片垂直居中的CSS代码——这个连接点过去的页面都飞了 2011/4/28 15:14:51
回复:代码冲突了,我改一下

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email