提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScriptCSS通用循环滚动条

循环 通用 滚动条 javascriptcss
2023-06-13 09:14:13 时间

滚动板 /*初始化*/ body{ font:12px/1"宋体",SimSun,serif; background:#fff; color:#000; } /*核心是position:relative;，才能让其内部的ul以绝对定位，通过改变top值实现向上移位置。*/ .scrollUl{ overflow:hidden; position:relative; } /*演示多个滚动板同时使用，这里是统一按每行按20px高，第一个每屏4行，第2个每屏6行。其实每组中行高也可不同。滚动速度与具体行高无关。*/ #scrollUlTest1{height:80px;} #scrollUlTest2{height:120px;} /*清除浏览器默认的margin和padding值*/ .scrollUlul,.scrollUlli{ margin:0; padding:0; list-style:noneoutside;/*清除浏览器中列表项默认的占位*/ } .scrollUlul{ position:absolute; } .scrollUlli{ height:20px; }

通用滚动板演示

第1组

  • 第1条内容
  • 第2条内容
  • 第3条内容
  • 第4条内容
  • 第5条内容
  • 第6条内容
  • 第7条内容
  • 第8条内容
  • 第9条内容
  • 第10条内容
  • 第11条内容
  • 第12条内容
  • 第13条内容
  • 第14条内容
  • 第15条内容
  • 第16条内容
  • 第17条内容
  • 第18条内容
  • 第19条内容
  • 第20条内容

第2组

  • 第1条内容
  • 第2条内容
  • 第3条内容
  • 第4条内容
  • 第5条内容
  • 第6条内容
  • 第7条内容
  • 第8条内容
  • 第9条内容
  • 第10条内容
  • 第11条内容
  • 第12条内容
  • 第13条内容
  • 第14条内容
  • 第15条内容
  • 第16条内容
  • 第17条内容
  • 第18条内容

相关文章