[JS] 改自网络：单行任意数量条公告循环滚动代码

最新推荐文章于 2023-08-14 08:56:30 发布

_Henrik

最新推荐文章于 2023-08-14 08:56:30 发布

阅读量398

点赞数

分类专栏： [JS]

本文链接：https://blog.csdn.net/cargelzhong/article/details/78692433

版权

[JS] 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
  > 
 
  < 
  html 
   xmlns= 
  "http://www.w3.org/1999/xhtml" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
   /> 
 
  < 
  title 
  >JS新闻公告文字逐条向上翻滚代码 
  </ 
  title 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  #rollText { 
 
  font: 
   12px / 
  20px 
   verdana; 
 
           } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "rollAD" 
  style= 
  "height:20px; position:absolute; width:100%; margin:10px 0 0;overflow:hidden;" 
  > 
 
  < 
  img 
  style= 
  'width:20px;height:20px;padding:0 20px;' 
  src= 
  "http://pic.qiantucdn.com/10/81/45/27bOOOPICc1.jpg!/fw/300/clip/0x400a0a0/format/webp" 
  > 
 
  < 
  div 
  id= 
  "rollText" 
  style= 
  "font-size:12px;line-height:20px;color:#666;" 
  > 
 
  < 
  a 
  >第一条公告广告 
  </ 
  a 
  > 
 
  < 
  br 
   /> 
 
  < 
  a 
  >第二条公告广告 
  </ 
  a 
  > 
 
  < 
  br 
   /> 
 
  < 
  a 
  >第三条公告广告 
  </ 
  a 
  > 
 
  < 
  br 
   /> 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
  // <![CDATA[ 
 
  var 
  textDiv = 
  document. 
  getElementById( 
  "rollText"); 
 
  var 
  textList = 
  textDiv. 
  getElementsByTagName( 
  "a"); 
 
  if ( 
  textList. 
  length > 
  1) { 
 
  var 
   textDat = 
  textDiv. 
  innerHTML; 
 
  var 
   br = 
  textDat. 
  toLowerCase(). 
  indexOf( 
  "<br", 
  3); 
 
  //var textUp2 = textDat.substr(0,br); 
 
  textDiv. 
  innerHTML = 
  textDat + 
  textDat. 
  substr( 
  0, 
  br); 
 
  textDiv. 
  style. 
  cssText = 
  "position:absolute;left:50px;right:50px;top:0;text-align:center;"; 
 
  var 
   textDatH = 
  textDiv. 
  offsetHeight; 
  MaxRoll(); 
 
           } 
 
  else { 
 
  textDiv. 
  style. 
  cssText = 
  "position:absolute;left:50px;right:50px;top:0;text-align:center;"; 
 
           } 
 
  var 
  minTime, 
  maxTime, 
  divTop, 
  newTop = 
  0; 
 
  function 
   MinRoll() { 
 
  newTop++; 
 
  if ( 
  newTop <= 
  divTop + 
  20) { 
 
  textDiv. 
  style. 
  top = 
  "-" + 
  newTop + 
  "px"; 
 
               } 
  else { 
 
  clearInterval( 
  minTime); 
 
  maxTime = 
   setTimeout( 
  MaxRoll, 
   2000); 
 
               } 
 
           } 
 
  function 
   MaxRoll() { 
 
  divTop = 
   Math. 
  abs( 
  parseInt( 
  textDiv. 
  style. 
  top)); 
 
  if ( 
  divTop >= 
  0 && 
  divTop < 
  textDatH - 
  20) { 
 
  minTime = 
   setInterval( 
  MinRoll, 
   1); 
 
               } 
  else { 
 
  textDiv. 
  style. 
  top = 
  0; 
  divTop = 
  0; 
  newTop = 
  0; 
  MaxRoll(); 
 
               } 
 
           } 
 
  // ]]> 
 
  < 
  / 
  script 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >