加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

javascript制作滚动公告栏

(2011-03-25 10:15:12)
标签：

it

 分类： js

javascript 向上滚动公告、水平滚动公告(翻页效果)

 

在页面中添加滚动公告栏，不但要向上滚动，而且可以向左滚动。滚动方向可以由用户选择。

以下是在Ext平台下运行的，UICtrl.StatusBarNoNotice 返回个TextItem。可以直接添加到Toolbar的Items中，进行测试。

Javascript代码

  1. UICtrl.StatusBarNoNotice = function() {  
  2.   
  3.     var noticeArray = [];  
  4.     // [id,title]  
  5.     noticeArray.push(["100", "部门周例会会议通知1"]);  
  6.     noticeArray.push(["200", "部门周例会会议通知2"]);  
  7.     noticeArray.push(["300", "部门周例会会议通知3"]);  
  8.     noticeArray.push(["400", "部门周例会会议通知4"]);  
  9.     noticeArray.push(["500", "部门周例会会议通知5"]);  
  10.   
  11.     var total = noticeArray.length;// 公告数量  
  12.   
  13.     // 公告栏  
  14.     var noticeTxt = new Ext.Toolbar.TextItem({  
  15.                 id : 'noticeTxt',  
  16.                 text : noticeArray[0][1]  
  17.             });  
  18.   
  19.     if (noticeArray.length == 0)  
  20.         noticeArray.push(["-1", "今天没有公告"]);  
  21.   
  22.       
  23.     var marqueeInterval = new Array();  
  24.     var marqueeId = 0;  
  25.     var marqueeDelay = 3000;// 停顿时间 (ms)  
  26.     var marqueeHeight = 16; // 公告栏高度  
  27.     var marqueeWidth = 300;// 公告栏宽度  
  28.     var dir = Sys.agentInfo.noticeScrollDir;// 滚动方向up/left up为向上滚动，left为向左滚动  
  29.     var separator = "    ●    ";  
  30.   
  31.     if (dir == "left")  
  32.         leafscroll();  
  33.     else  
  34.         upscroll();  
  35.   
  36.       
  37.     function leafscroll() {  
  38.         var str = "";  
  39.         if (noticeArray[0][0] == "-1")  
  40.             return;  
  41.         for (var i = 0; i < noticeArray.length; i++) {  
  42.             str += separator;  
  43.             var item = '<a onclick="new UICtrl.ShowNoNotice('  
  44.                     + String(noticeArray[i][0]) + ')" style="cursor:pointer;">'  
  45.                     + noticeArray[i][1] + '</a>';  
  46.             str += item;  
  47.         }  
  48.   
  49.         noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'  
  50.                 + marqueeHeight  
  51.                 + 'px;width:'  
  52.                 + marqueeWidth  
  53.                 + 'px;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'  
  54.                 + str + '</div><div id="notice2" style="float:left;">' + str  
  55.                 + '</div></div></div>';  
  56.         if (document.getElementByIdx_x("noticeTxt")) {  
  57.             var noticeText = document.getElementByIdx_x("noticeTxt");  
  58.             noticeText.innerHTML = noticeDiv;  
  59.         } else  
  60.             noticeTxt.text = noticeDiv;  
  61.   
  62.         var mytask = new Ext.TaskMgr.start({  
  63.                     run : function() {  
  64.                         var noticeText = document.getElementByIdx_x("noticeTxt");  
  65.                         // noticeText.innerHTML = noticeDiv;  
  66.   
  67.                         var dir1 = Sys.agentInfo.noticeScrollDir;  
  68.                         if (dir1 == "up") {  
  69.                             noticeText.innerHTML = "";  
  70.                             Ext.TaskMgr.stop(mytask);  
  71.                             upscroll();  
  72.                             return;  
  73.                         }  
  74.                         var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  75.                         var notice1 = document.getElementByIdx_x("notice1");  
  76.                         var notice2 = document.getElementByIdx_x("notice2");  
  77.   
  78.                         if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)  
  79.                             marqueeBox.scrollLeft -= notice1.offsetWidth  
  80.                         else {  
  81.                             marqueeBox.scrollLeft++;  
  82.                         }  
  83.                         marqueeBox.onmouseover = function() {  
  84.                             Ext.TaskMgr.stop(mytask);  
  85.                         };  
  86.                         marqueeBox.onmouseout = function() {  
  87.                             Ext.TaskMgr.start(mytask);  
  88.                         };  
  89.                     },  
  90.                     interval : 10  
  91.                 });  
  92.     }  
  93.   
  94.       
  95.     function upscroll() {  
  96.         var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("  
  97.                 + noticeArray[0][0] + ");' style='cursor:pointer;'>"  
  98.                 + noticeArray[0][1] + "</a>";  
  99.         if (noticeArray[0][0] == "-1")  
  100.             str = noticeArray[0][1];  
  101.         else  
  102.             marqueeId++;  
  103.   
  104.         noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'  
  105.                 + marqueeHeight + 'px;width:' + marqueeWidth + 'px;"><div>'  
  106.                 + str + '</div></div>';  
  107.   
  108.         if (document.getElementByIdx_x("noticeTxt")) {  
  109.             var noticeText = document.getElementByIdx_x("noticeTxt");  
  110.             noticeText.innerHTML = noticeDiv;  
  111.         } else  
  112.             noticeTxt.text = noticeDiv;  
  113.   
  114.         marqueeInterval[0] = new Ext.TaskMgr.start({  
  115.             run : function() {  
  116.                 var dir1 = Sys.agentInfo.noticeScrollDir;  
  117.   
  118.                 var noticeText = document.getElementByIdx_x("noticeTxt");  
  119.   
  120.                 if (dir1 == "left") {  
  121.                     noticeText.innerHTML = "";  
  122.                     Ext.TaskMgr.stop(marqueeInterval[0]);  
  123.                     Ext.TaskMgr.stop(marqueeInterval[1]);  
  124.                     leafscroll();  
  125.                     return;  
  126.                 }  
  127.                 var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  128.   
  129.                 if (noticeArray[marqueeId])  
  130.                     var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("  
  131.                             + noticeArray[marqueeId][0]  
  132.                             + ");' style='cursor:pointer;'>"  
  133.                             + noticeArray[marqueeId][1] + "</a>";  
  134.   
  135.                 if (noticeArray[0][0] == "-1")  
  136.                     str = noticeArray[0][1];  
  137.   
  138.                 marqueeId++;  
  139.                 if (marqueeId >= noticeArray.length)  
  140.                     marqueeId = 0;  
  141.   
  142.                 if (marqueeBox.childNodes.length == 1) {  
  143.                     var nextLine = document.createElement_x('DIV');  
  144.                     nextLine.innerHTML = str;  
  145.                     nextLine.style.width = marqueeWidth;  
  146.                     marqueeBox.appendChild(nextLine);  
  147.                 } else {  
  148.                     marqueeBox.childNodes[0].innerHTML = str;  
  149.                     marqueeBox.appendChild(marqueeBox.childNodes[0]);  
  150.                     marqueeBox.scrollTop = 0;  
  151.                 }  
  152.                 marqueeBox.onmouseover = function() {  
  153.                     Ext.TaskMgr.stop(marqueeInterval[0])  
  154.                 }  
  155.                 marqueeBox.onmouseout = function() {  
  156.                     Ext.TaskMgr.start(marqueeInterval[0]);  
  157.                 }  
  158.                 // /marqueeBox.onclick = function() {  
  159.                 // /new UICtrl.ShowNoNotice();  
  160.                 // /}  
  161.                 if (marqueeInterval[1])  
  162.                     Ext.TaskMgr.stop(marqueeInterval[1]);  
  163.                 marqueeInterval[1] = new Ext.TaskMgr.start({  
  164.                     run : function() {  
  165.                         var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  166.                         marqueeBox.scrollTop++;  
  167.                         if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {  
  168.                             Ext.TaskMgr.stop(marqueeInterval[1]);  
  169.                         }  
  170.                     },  
  171.                     interval : 20  
  172.                 });  
  173.             },  
  174.             interval : 3000  
  175.         });  
  176.     }  
  177.     return [noticeTxt];  
  178. }  

UICtrl.StatusBarNoNotice = function() {

 

   var noticeArray = [];

   // [id,title]

   noticeArray.push(["100", "部门周例会会议通知1"]);

   noticeArray.push(["200", "部门周例会会议通知2"]);

   noticeArray.push(["300", "部门周例会会议通知3"]);

   noticeArray.push(["400", "部门周例会会议通知4"]);

   noticeArray.push(["500", "部门周例会会议通知5"]);

 

   var total = noticeArray.length;// 公告数量

 

   // 公告栏

   var noticeTxt = new Ext.Toolbar.TextItem({

            id : 'noticeTxt',

            text : noticeArray[0][1]

         });

 

   if (noticeArray.length == 0)

      noticeArray.push(["-1", "今天没有公告"]);

 

  

   var marqueeInterval = new Array();

   var marqueeId = 0;

   var marqueeDelay = 3000;// 停顿时间 (ms)

   var marqueeHeight = 16; // 公告栏高度

   var marqueeWidth = 300;// 公告栏宽度

   var dir = Sys.agentInfo.noticeScrollDir;// 滚动方向up/left up为向上滚动，left为向左滚动

   var separator = "&nbsp;&nbsp;&nbsp;&nbsp;●&nbsp;&nbsp;&nbsp;&nbsp;";

 

   if (dir == "left")

      leafscroll();

   else

      upscroll();

 

  

   function leafscroll() {

      var str = "";

      if (noticeArray[0][0] == "-1")

         return;

      for (var i = 0; i < noticeArray.length; i++) {

         str += separator;

         var item = '<a onclick="new UICtrl.ShowNoNotice('

               + String(noticeArray[i][0]) + ')" style="cursor:pointer;">'

               + noticeArray[i][1] + '</a>';

         str += item;

      }

 

      noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'

            + marqueeHeight

            + 'px;width:'

            + marqueeWidth

            + 'px;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'

            + str + '</div><div id="notice2" style="float:left;">' + str

            + '</div></div></div>';

      if (document.getElementByIdx_x("noticeTxt")) {

         var noticeText = document.getElementByIdx_x("noticeTxt");

         noticeText.innerHTML = noticeDiv;

      } else

         noticeTxt.text = noticeDiv;

 

      var mytask = new Ext.TaskMgr.start({

               run : function() {

                  var noticeText = document.getElementByIdx_x("noticeTxt");

                  // noticeText.innerHTML = noticeDiv;

 

                  var dir1 = Sys.agentInfo.noticeScrollDir;

                  if (dir1 == "up") {

                     noticeText.innerHTML = "";

                     Ext.TaskMgr.stop(mytask);

                     upscroll();

                     return;

                  }

                  var marqueeBox = document.getElementByIdx_x("marqueeBox");

                  var notice1 = document.getElementByIdx_x("notice1");

                  var notice2 = document.getElementByIdx_x("notice2");

 

                  if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)

                     marqueeBox.scrollLeft -= notice1.offsetWidth

                  else {

                     marqueeBox.scrollLeft++;

                  }

                  marqueeBox.onmouseover = function() {

                     Ext.TaskMgr.stop(mytask);

                  };

                  marqueeBox.onmouseout = function() {

                     Ext.TaskMgr.start(mytask);

                  };

               },

               interval : 10

            });

   }

 

  

   function upscroll() {

      var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("

            + noticeArray[0][0] + ");' style='cursor:pointer;'>"

            + noticeArray[0][1] + "</a>";

      if (noticeArray[0][0] == "-1")

         str = noticeArray[0][1];

      else

         marqueeId++;

 

      noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'

            + marqueeHeight + 'px;width:' + marqueeWidth + 'px;"><div>'

            + str + '</div></div>';

 

      if (document.getElementByIdx_x("noticeTxt")) {

         var noticeText = document.getElementByIdx_x("noticeTxt");

         noticeText.innerHTML = noticeDiv;

      } else

         noticeTxt.text = noticeDiv;

 

      marqueeInterval[0] = new Ext.TaskMgr.start({

         run : function() {

            var dir1 = Sys.agentInfo.noticeScrollDir;

 

            var noticeText = document.getElementByIdx_x("noticeTxt");

 

            if (dir1 == "left") {

               noticeText.innerHTML = "";

               Ext.TaskMgr.stop(marqueeInterval[0]);

               Ext.TaskMgr.stop(marqueeInterval[1]);

               leafscroll();

               return;

            }

            var marqueeBox = document.getElementByIdx_x("marqueeBox");

 

            if (noticeArray[marqueeId])

               var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("

                     + noticeArray[marqueeId][0]

                     + ");' style='cursor:pointer;'>"

                     + noticeArray[marqueeId][1] + "</a>";

 

            if (noticeArray[0][0] == "-1")

               str = noticeArray[0][1];

 

            marqueeId++;

            if (marqueeId >= noticeArray.length)

               marqueeId = 0;

 

            if (marqueeBox.childNodes.length == 1) {

               var nextLine = document.createElement_x('DIV');

               nextLine.innerHTML = str;

               nextLine.style.width = marqueeWidth;

               marqueeBox.appendChild(nextLine);

            } else {

               marqueeBox.childNodes[0].innerHTML = str;

               marqueeBox.appendChild(marqueeBox.childNodes[0]);

               marqueeBox.scrollTop = 0;

            }

            marqueeBox.onmouseover = function() {

               Ext.TaskMgr.stop(marqueeInterval[0])

            }

            marqueeBox.onmouseout = function() {

               Ext.TaskMgr.start(marqueeInterval[0]);

            }

            // /marqueeBox.onclick = function() {

            // /new UICtrl.ShowNoNotice();

            // /}

            if (marqueeInterval[1])

               Ext.TaskMgr.stop(marqueeInterval[1]);

            marqueeInterval[1] = new Ext.TaskMgr.start({

               run : function() {

                  var marqueeBox = document.getElementByIdx_x("marqueeBox");

                  marqueeBox.scrollTop++;

                  if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {

                     Ext.TaskMgr.stop(marqueeInterval[1]);

                  }

               },

               interval : 20

            });

         },

         interval : 3000

      });

   }

   return [noticeTxt];

}

 



以下是纯JS版本的代码:

Html代码  file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image003.gif

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>滚动公告(横向/纵向)</title>  
  6.   
  7. </head>  
  8. <body style="margin: 5px;">  
  9. <div>  
  10.     <button onclick="left()">横向滚动</button>  
  11.     <button onclick="up()">纵向滚动</button>  
  12. </div>  
  13. <div id="noticeBar">notice</div>  
  14. <hr>  
  15. <script type="text/javascript" language="javascript">  
  16. var noticeArray = [];  
  17. //[id,title]  
  18. noticeArray.push( [ "100", "部门周例会会议通知1" ]);  
  19. noticeArray.push( [ "200", "部门周例会会议通知2" ]);  
  20. noticeArray.push( [ "300", "部门周例会会议通知3" ]);  
  21. noticeArray.push( [ "400", "部门周例会会议通知4" ]);  
  22. noticeArray.push( [ "500", "部门周例会会议通知5" ]);  
  23.   
  24. var total = noticeArray.length;// 公告数量  
  25.   
  26. if (noticeArray.length == 0)  
  27.     noticeArray.push( [ "-1", "今天没有公告" ]);  
  28.   
  29.   
  30. var marqueeInterval = new Array();  
  31. var marqueeId = 0;  
  32. var marqueeDelay = 3000;// 停顿时间 (ms)  
  33. var marqueeHeight = 16; // 公告栏高度  
  34. var marqueeWidth = 300;// 公告栏宽度  
  35. var dir = 'left';// 滚动方向up/left up为向上滚动，left为向左滚动  
  36. var separator = "&nbsp;&nbsp;&nbsp;&nbsp;<font color='#999999'>●</font>&nbsp;&nbsp;&nbsp;&nbsp;";  
  37.   
  38. if (dir == "left")  
  39.     leafscroll();  
  40. else  
  41.     upscroll();  
  42.   
  43.   
  44. function leafscroll() {  
  45.     var str = "";  
  46.     if (noticeArray[0][0] == "-1")  
  47.         return;  
  48.     for ( var i = 0; i < noticeArray.length; i++) {  
  49.         str += separator;  
  50.         var item = '<a onclick="alert(' + String(noticeArray[i][0])  
  51.                 + ')" style="cursor:pointer;">' + noticeArray[i][1] + '</a>';  
  52.         str += item;  
  53.     }  
  54.   
  55.     noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'  
  56.             + marqueeHeight  
  57.             + 'px;width:'  
  58.             + marqueeWidth  
  59.             + 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'  
  60.             + str + '</div><div id="notice2" style="float:left;">' + str  
  61.             + '</div></div></div>';  
  62.   
  63.     var noticeBar = document.getElementByIdx_x("noticeBar");  
  64.     noticeBar.innerHTML = noticeDiv  
  65.   
  66.     marqueeInterval[3] = window.setInterval(LeftStartFn, 10);  
  67.   
  68.     function LeftStartFn() {  
  69.         if (dir == "up") {  
  70.             noticeBar.innerHTML = "";  
  71.             window.clearInterval(marqueeInterval[3]);  
  72.             upscroll();  
  73.             return;  
  74.         }  
  75.         var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  76.         var notice1 = document.getElementByIdx_x("notice1");  
  77.         var notice2 = document.getElementByIdx_x("notice2");  
  78.   
  79.         if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)  
  80.             marqueeBox.scrollLeft -= notice1.offsetWidth  
  81.         else {  
  82.             marqueeBox.scrollLeft++;  
  83.         }  
  84.         marqueeBox.onmouseover = function() {  
  85.             window.clearInterval(marqueeInterval[3])  
  86.         };  
  87.         marqueeBox.onmouseout = function() {  
  88.             marqueeInterval[3] = window.setInterval(LeftStartFn, 10)  
  89.         };  
  90.     }  
  91. }  
  92.   
  93. function upscroll() {  
  94.     var str = "<a onclick='javascript:new UICtrl.ShowNoNotice("  
  95.             + noticeArray[0][0] + ");' style='cursor:pointer;'>"  
  96.             + noticeArray[0][1] + "</a>";  
  97.     if (noticeArray[0][0] == "-1")  
  98.         str = noticeArray[0][1];  
  99.     else  
  100.         marqueeId++;  
  101.   
  102.     noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'  
  103.             + marqueeHeight  
  104.             + 'px;width:'  
  105.             + marqueeWidth  
  106.             + 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div>'  
  107.             + str + '</div></div>';  
  108.   
  109.     var noticeBar = document.getElementByIdx_x("noticeBar");  
  110.     noticeBar.innerHTML = noticeDiv  
  111.   
  112.     marqueeInterval[0] = window.setInterval(upStartFn, 3000);  
  113.   
  114.     function upStartFn() {  
  115.   
  116.         if (dir == "left") {  
  117.             noticeBar.innerHTML = "";  
  118.             window.clearInterval(marqueeInterval[0]);  
  119.             window.clearInterval(marqueeInterval[1]);  
  120.             leafscroll();  
  121.             return;  
  122.         }  
  123.         var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  124.   
  125.         if (noticeArray[marqueeId])  
  126.             var str = "<a onclick='javascript:alert("  
  127.                     + noticeArray[marqueeId][0]  
  128.                     + ");' style='cursor:pointer;'>"  
  129.                     + noticeArray[marqueeId][1] + "</a>";  
  130.   
  131.         if (noticeArray[0][0] == "-1")  
  132.             str = noticeArray[0][1];  
  133.   
  134.         marqueeId++;  
  135.         if (marqueeId >= noticeArray.length)  
  136.             marqueeId = 0;  
  137.   
  138.         if (marqueeBox.childNodes.length == 1) {  
  139.             var nextLine = document.createElement_x('DIV');  
  140.             nextLine.innerHTML = str;  
  141.             nextLine.style.width = marqueeWidth;  
  142.             marqueeBox.appendChild(nextLine);  
  143.         } else {  
  144.             marqueeBox.childNodes[0].innerHTML = str;  
  145.             marqueeBox.appendChild(marqueeBox.childNodes[0]);  
  146.             marqueeBox.scrollTop = 0;  
  147.         }  
  148.         marqueeBox.onmouseover = function() {  
  149.             window.clearInterval(marqueeInterval[0])  
  150.         }  
  151.         marqueeBox.onmouseout = function() {  
  152.             marqueeInterval[0] = window.setInterval(upStartFn, 3000);  
  153.         }  
  154.   
  155.         if (marqueeInterval[1])  
  156.             window.clearInterval(marqueeInterval[1]);  
  157.         marqueeInterval[1] = window.setInterval(scrollFn, 10);  
  158.     }  
  159.   
  160.     function scrollFn() {  
  161.         var marqueeBox = document.getElementByIdx_x("marqueeBox");  
  162.         marqueeBox.scrollTop++;  
  163.         if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {  
  164.             window.clearInterval(marqueeInterval[1]);  
  165.         }  
  166.     }  
  167. }  
  168. function left() {  
  169.     dir = 'left';  
  170. }  
  171.   
  172. function up() {  
  173.     dir = 'up';  
  174. }  
  175. </script>  
  176. </body>  
  177. </html>  

 

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有