蓝
JavaScript
阅读:5203
评论:1

公告滚动、 版块切换JS

Calchas 发表于 2008, December 17, 4:27 PM

滚动 JS 代码

 

JavaScript代码
  1. var speeda = 50;  
  2. var div0 = document.getElementById("announce");   
  3. var div1 = document.getElementById("announce1");   
  4. var div2 = document.getElementById("announce2");   
  5.   
  6. //先判断高度  
  7. if (div1.offsetHeight > div0.offsetHeight)  
  8. {  
  9. div2.innerHTML = div1.innerHTML;   
  10. //alert((div2.offsetTop-div1.offsetTop) +"-"+ div1.scrollTop +"-"+div2.offsetTop +"-"+ div2.offsetHeight);  
  11. var MyMar = setInterval(Marquee,speeda);  
  12. div0.onmouseover = function() {clearInterval(MyMar)};  
  13. div0.onmouseout = function() {MyMar = setInterval(Marquee,speeda)};  
  14. }  
  15.   
  16. function Marquee(){  
  17. if(div2.offsetTop - div1.offsetTop - div0.scrollTop <= 0)  
  18. {  
  19. div0.scrollTop -= div1.offsetHeight;  
  20. }  
  21. else{  
  22. div0.scrollTop ++;  
  23. }  
  24. }  

滚动 HTML 代码

 

 

XML/HTML代码
  1. <div id="announce" style="width:260px;height:200px;overflow:hidden;">  
  2. <div id="announce1" class="font4">  
  3. <ul>  
  4. <li><a href="/Article/HDGG/2008/12/10/305.html" target="_self">国际部12月活动预告</a>[12-02]</li><li><a href="/Article/HDGG/2008/12/10/296.html" target="_self">美国名校直达班（春季班）招生</a>[09-02]</li><li><a href="/Article/HDGG/2008/12/10/295.html" target="_self">澳洲顶级名校直升班即将开班</a>[09-02]</li><li><a href="/Article/HDGG/2008/12/10/284.html" target="_self">最新GAC预科入学考试时间</a>[06-16]</li><li><a href="/Article/HDGG/2008/12/10/269.html" target="_self">留学专题活动</a>[03-12]</li><li><a href="/Article/HDGG/2008/12/10/245.html" target="_self">第23届教师节庆祝大会</a>[09-11]</li><li><a href="/Article/HDGG/2008/12/10/37.html" target="_self">2005年成都市树德中学国际部GAC国际大学预科课程正在招生！</a>[05-25]</li><li><a href="/Article/HDGG/2008/12/10/35.html" target="_self">树德中学VCE中澳国际高中双文凭课程招生简章</a>[05-25]</li>  
  5. </ul>  
  6. </div>  
  7. <div id="announce2" class="font4">  
  8. </div>  
  9. </div>  

 

栏目切换 JS 代码

JavaScript代码
  1. var num=6; //该值记录标签的个数     
  2. var settime;     
  3. function GetObj(objName){     
  4. if(document.getElementById){     
  5. return eval('document.getElementById("' + objName + '")');     
  6. }else if(document.layers){     
  7. return eval("document.layers['" + objName +"']");     
  8. }else{     
  9. return eval('document.all.' + objName);     
  10. }     
  11. }     
  12. function change_Menu(index){     
  13. for(var i=1;i<=num;i++){  
  14. /* 最多支持8个标签 */    
  15. if(GetObj("con"+i)&&GetObj("m"+i)){     
  16. GetObj("con"+i).style.display = 'none';     
  17. GetObj("m"+i).className = "menu"+i+"Off";     
  18. }     
  19. }     
  20. if(GetObj("con"+index)&&GetObj("m"+index)){     
  21. GetObj("con"+index).style.display = 'block';     
  22. GetObj("m"+index).className = "menu"+index+"On";     
  23. }     
  24. cur_index=index;     
  25. if(cur_index<num){     
  26. cur_index++;     
  27. }     
  28. else{     
  29. cur_index=1;     
  30. }     
  31. settime=setTimeout("change_Menu(cur_index)",2000);//设置延迟时间     
  32. }     
  33. function superMenu(c_index){     
  34. clearTimeout(settime);     
  35. change_Menu(c_index);     
  36. }   

 

栏目切换HTML

 

XML/HTML代码
  1. <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" id="">  
  2. <tr><td>                           
  3. <div>  
  4. <UL id="supermenu">  
  5. <LI id="m1" onmouseover="superMenu(1)" class="menu1On">最新</LI>  
  6. <LI id="m2" onmouseover="superMenu(2)" class="menu2Off">城中</LI>  
  7. <LI id="m3" onmouseover="superMenu(3)" class="menu3Off">城东</LI>  
  8. <LI id="m4" onmouseover="superMenu(4)" class="menu4Off">城南</LI>  
  9. <LI id="m5" onmouseover="superMenu(5)" class="menu5Off">城西</LI>  
  10. <LI id="m6" onmouseover="superMenu(6)" class="menu6Off">城北</LI>  
  11. <LI id="m7"></LI>  
  12. </UL>  
  13. </div>  
  14. </td></tr>  
  15. <tr><td valign="top">  
  16. <div id="con1" style="display:display;" class="">  
  17. <ul id="conleft">  
  18. <li class="supermarketTuijian">热门推荐</li>  
  19. <li></li>  
  20. </ul>  
  21. <ul id="conright">  
  22. </ul>  
  23. </div>  
  24. <div id="con2" style="display:none;" class="">  
  25. <ul id="conleft">  
  26. <li class="supermarketTuijian">热门推荐</li>  
  27. <li></li>  
  28. </ul>  
  29. <ul id="conright">  
  30. </ul>  
  31. </div>  
  32. <div id="con3" style="display:none;" class="">  
  33. <ul id="conleft">  
  34. <li class="supermarketTuijian">热门推荐</li>  
  35. <li></li>  
  36. </ul>  
  37. <ul id="conright">  
  38. </ul>  
  39. </div>  
  40. <div id="con4" style="display:none;" class="">  
  41. <ul id="conleft">  
  42. <li class="supermarketTuijian">热门推荐</li>  
  43. <li></li>  
  44. </ul>  
  45. <ul id="conright">  
  46. </ul>  
  47. </div>  
  48. <div id="con5" style="display:none;" class="">  
  49. <ul id="conleft">  
  50. <li class="supermarketTuijian">热门推荐</li>  
  51. <li></li>  
  52. </ul>  
  53. <ul id="conright">  
  54. </ul>  
  55. </div>  
  56. <div id="con6" style="display:none;" class="">  
  57. <ul id="conleft">  
  58. <li class="supermarketTuijian">热门推荐</li>  
  59. <li></li>  
  60. </ul>  
  61. <ul id="conright">  
  62. </ul>  
  63. </div>  
  64. </td></tr>  
  65. </table>  
引用： 点击获得Trackback地址,Encode: UTF-8　点击获得Trackback地址,Encode: GB2312 or GBK　点击获得Trackback地址,Encode: BIG5
» 我要发表评论 ...    访客评论： (1条记录)
  1. 1 Calchas :
    2008, December 30, 4:01 PM   引用此文发表评论
    if(de.offsetTop-demo.scrollTop<=0)
    改为
    if(div2.offsetTop-div1.offsetTop - div0.scrollTop <= 0)

    向左是scrollLeft++ 向右是scrollLeft-- 向上是scrollTop++ 向下是scrollTop--
 
发表评论：( 你的参与是我最大的动力! )