比較的に使いやすいjs文字はシームレスにスクロールして、ff ie 678をサポートします.

15502 ワード
職場 FF レジャー 互換IE テキストシームレススクロールコード 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>      </title> 
    6. 
   
   
   
   
  6. <style type="text/css"> 
    7. 
   
   
   
   
  7. *{padding:0; margin:0;} 
    8. 
   
   
   
   
  8. #roll{ border:1px solid red;height:400px; margin:10px auto; width:350px; overflow:hidden;list-style:none;} 
    9. 
   
   
   
   
  9. #roll li{height:30px; padding-left:10px;line-height:30px; border-bottom:1px solid #ddd;} 
    10. 
   
   
   
   
  10. a{font-size:12px; text-decoration:none; font-family:'  ';} 
    11. 
   
   
   
   
  11. </style> 
    12. 
   
   
   
   
  12. </head> 
    13. 
   
   
   
   
  13. <body> 
    14. 
   
   
   
   
  14.   <ol id="roll"> 
    15. 
   
   
   
   
  15.     <li><a href="#">    </a></li> 
    16. 
   
   
   
   
  16.     <li><a href="#">    </a></li> 
    17. 
   
   
   
   
  17.     <li><a href="#">    </a></li> 
    18. 
   
   
   
   
  18.     <li><a href="#">    </a></li> 
    19. 
   
   
   
   
  19.     <li><a href="#">    </a></li> 
    20. 
   
   
   
   
  20.     <li><a href="#">    </a></li> 
    21. 
   
   
   
   
  21.     <li><a href="#">    </a></li> 
    22. 
   
   
   
   
  22.   </ol> 
    23. 
   
   
   
   
  23.   <div id="bug"></div> 
    24. 
   
   
   
   
  24. </body> 
    25. 
   
   
   
   
  25. <script type="text/javascript"> 
    26. 
   
   
   
   
  26. (function(A){ 
    27. 
   
   
   
   
  27.    function _ROLL(obj){ 
    28. 
   
   
   
   
  28.       this.ele = document.getElementById(obj); 
    29. 
   
   
   
   
  29.       this.interval = false; 
    30. 
   
   
   
   
  30.       this.currentNode = 0; 
    31. 
   
   
   
   
  31.       this.passNode = 0; 
    32. 
   
   
   
   
  32.       this.speed = 100; 
    33. 
   
   
   
   
  33.       this.childs = _childs(this.ele); 
    34. 
   
   
   
   
  34.       this.childHeight = parseInt(_style(this.childs[0])['height']); 
    35. 
   
   
   
   
  35.           addEvent(this.ele,'mouseover',function(){ 
    36. 
   
   
   
   
  36.                                                window._loveYR.pause(); 
    37. 
   
   
   
   
  37.                                             }); 
    38. 
   
   
   
   
  38.           addEvent(this.ele,'mouseout',function(){ 
    39. 
   
   
   
   
  39.                                                window._loveYR.start(_loveYR.speed); 
    40. 
   
   
   
   
  40.                                             }); 
    41. 
   
   
   
   
  41.    } 
    42. 
   
   
   
   
  42.    function _style(obj){ 
    43. 
   
   
   
   
  43.      return obj.currentStyle || document.defaultView.getComputedStyle(obj,null); 
    44. 
   
   
   
   
  44.    } 
    45. 
   
   
   
   
  45.    function _childs(obj){ 
    46. 
   
   
   
   
  46.       var childs = []; 
    47. 
   
   
   
   
  47.       for(var i=0;i<obj.childNodes.length;i++){ 
    48. 
   
   
   
   
  48.          var _this = obj.childNodes[i]; 
    49. 
   
   
   
   
  49.          if(_this.nodeType===1){ 
    50. 
   
   
   
   
  50.             childs.push(_this); 
    51. 
   
   
   
   
  51.          } 
    52. 
   
   
   
   
  52.       }    
    53. 
   
   
   
   
  53.       return childs; 
    54. 
   
   
   
   
  54.    } 
    55. 
   
   
   
   
  55.     function addEvent(elem,evt,func){ 
    56. 
   
   
   
   
  56.        if(-[1,]){ 
    57. 
   
   
   
   
  57.            elem.addEventListener(evt,func,false);    
    58. 
   
   
   
   
  58.        }else{ 
    59. 
   
   
   
   
  59.            elem.attachEvent('on'+evt,func); 
    60. 
   
   
   
   
  60.        }; 
    61. 
   
   
   
   
  61.     } 
    62. 
   
   
   
   
  62.     function innerest(elem){ 
    63. 
   
   
   
   
  63.       var c = elem; 
    64. 
   
   
   
   
  64.       while(c.childNodes.item(0).nodeType==1){ 
    65. 
   
   
   
   
  65.           cc = c.childNodes.item(0); 
    66. 
   
   
   
   
  66.       } 
    67. 
   
   
   
   
  67.       return c; 
    68. 
   
   
   
   
  68.     } 
    69. 
   
   
   
   
  69.    _ROLL.prototype = { 
    70. 
   
   
   
   
  70.       start:function(s){ 
    71. 
   
   
   
   
  71.               var _this = this; 
    72. 
   
   
   
   
  72.               _this.speed = s || 100; 
    73. 
   
   
   
   
  73.               _this.interval = setInterval(function(){ 
    74. 
   
   
   
   
  74.                             _this.ele.scrollTop += 1; 
    75. 
   
   
   
   
  75.                             _this.passNode++; 
    76. 
   
   
   
   
  76.                             if(_this.passNode%_this.childHeight==0){ 
    77. 
   
   
   
   
  77.                                   var o = _this.childs[_this.currentNode] || _this.childs[0]; 
    78. 
   
   
   
   
  78.                                   _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0; 
    79. 
   
   
   
   
  79.                                   _this.passNode = 0; 
    80. 
   
   
   
   
  80.                                   _this.ele.scrollTop = 0; 
    81. 
   
   
   
   
  81.                                   _this.ele.appendChild(o); 
    82. 
   
   
   
   
  82.                             } 
    83. 
   
   
   
   
  83.                           },_this.speed); 
    84. 
   
   
   
   
  84.       }, 
    85. 
   
   
   
   
  85.       pause:function(){ 
    86. 
   
   
   
   
  86.          var _this = this; 
    87. 
   
   
   
   
  87.          clearInterval(_this.interval); 
    88. 
   
   
   
   
  88.       } 
    89. 
   
   
   
   
  89.    } 
    90. 
   
   
   
   
  90.     A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;} 
    91. 
   
   
   
   
  91. })(window); 
    92. 
   
   
   
   
  92. marqueen('roll').start(10/*    100*/); 
    93. 
   
   
   
   
  93. </script> 
    94. 
   
   
   
   
  94. </html> 
    95.
jsがinsertRowでイベントを起こす方法