[关闭]
@EncyKe 2015-12-29T15:59:19.000000Z 字数 3572 阅读 1867

JS:信息滚动

前端 JavaScript



一、HTML实现

运用<marquee>标签,但此标签已不建议被使用;

  1. 方式:behavior=scroll(循环), slide(只一次), alternate(来回交替)
  2. 方向:direction=up, down, left, right
  3. 次数:loop=数值(默认为-1,表无限滚动);
  4. 速度:scrollamount=数值(像素)
  5. 延迟:scrolldelay=数值(毫秒)
  6. 区域背景色:bgcolor
  7. 区域尺寸:widthheight
  8. 空白空间hspacevspace=数字(像素)

悬停静止:onmouseover="this.stop();"
移开滚动:onmouseout="this.start();"m;

二、JS实现

1. 无缝滚动效果

HTML部分

  1. <div id="mooc">
  2. <h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
  3. <div id="moocBox">
  4. <ul id="con1">
  5. <li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
  6. <li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
  7. <li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
  8. <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
  9. <li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
  10. <li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
  11. <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
  12. <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
  13. <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
  14. </ul>
  15. <ul id="con2">
  16. </ul>
  17. </div>
  18. </div>

CSS部分

  1. /* reset */
  2. body {
  3. font-size: 12px;
  4. line-height: 24px;
  5. text-algin: center;
  6. }
  7. * {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. ul {
  12. list-style: none;
  13. }
  14. a img {
  15. border: none;
  16. }
  17. a {
  18. color: #333;
  19. text-decoration: none;
  20. }
  21. a:hover {
  22. color: #ff0000;
  23. }
  24. #mooc {
  25. width: 399px;
  26. border: 5px solid #ababab;
  27. border-radius: 15px;
  28. box-shadow: 2px 2px 10px #ababab;
  29. margin: 50px auto 0;
  30. text-align: left;
  31. }
  32. /* 头部样式 */
  33. #moocTitle {
  34. height: 62px;
  35. overflow: hidden;
  36. /* 内容超出的部分要隐藏,避免撑高头部 */
  37. font-size: 26px;
  38. line-height: 62px;
  39. padding-left: 30px;
  40. background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
  41. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
  42. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/
  43. border: 1px solid ##f05e6f;
  44. border-radius: 8px 8px 0 0;
  45. color: #fff;
  46. position: relative;
  47. }
  48. #moocTitle a {
  49. position: absolute;
  50. right: 10px;
  51. bottom: 10px;
  52. display: inline;
  53. color: #fff;
  54. font-size: 12px;
  55. line-height: 24px;
  56. }
  57. /* 底部样式 */
  58. #moocBot {
  59. width: 399px;
  60. height: 10px;
  61. overflow: hidden;
  62. /* 内容超出的部分要隐藏,避免撑高底部 */
  63. }
  64. /* 中间样式 */
  65. #moocBox {
  66. height: 144px;
  67. width: 335px;
  68. margin-left: 25px;
  69. margin-top: 10px;
  70. overflow: hidden;
  71. }
  72. #mooc ul li {
  73. height: 24px;
  74. }
  75. #mooc ul li a {
  76. width: 180px;
  77. float: left;
  78. display: block;
  79. overflow: hidden;
  80. text-indent: 15px;
  81. height: 24px;
  82. }
  83. #mooc ul li span {
  84. float: right;
  85. color: #999;
  86. }

JS部分

  1. var area = document.getElementById('moocBox');
  2. var con1 = document.getElementById('con1');
  3. var con2 = document.getElementById('con2');
  4. var speed = 50;
  5. // 初始化scrollTop;
  6. area.scrollTop = 0;
  7. // 克隆ul列表;
  8. con2.innerHTML = con1.innerHTML;
  9. function scrollUp(){
  10. // 判断是否滚动到头,若是,初始化;
  11. if(area.scrollTop >= con1.scrollHeight) {
  12. area.scrollTop = 0;
  13. }else{
  14. area.scrollTop ++;
  15. }
  16. }
  17. // 设置计时器;
  18. var myScroll = setInterval("scrollUp()",speed);
  19. // 鼠标悬停停止计时器;
  20. area.onmouseover = function(){
  21. clearInterval(myScroll);
  22. }
  23. // 鼠标移出继续计时器;
  24. area.onmouseout = function(){
  25. myScroll = setInterval("scrollUp()",speed);
  26. }

2. 间歇性滚动效果

HTML部分

与上一节文字无缝滚动的HTML代码相似,摘除<ul id="con2"></ul>即可;

CSS部分

与上一节文字无缝滚动的CSS代码相同。

JS部分

  1. var area = document.getElementById('moocBox');
  2. // 设置单行滚动的高度;
  3. var iLineHeight = 24;
  4. // 设置滚动的速度;
  5. var speed = 50;
  6. var time;
  7. // 设置延迟;
  8. var delay = 2000;
  9. area.scrollTop = 0;
  10. // 克隆整个容器;
  11. area.innerHTML += area.innerHTML;
  12. // 向上滚动主函数;
  13. function startScroll(){
  14. time = setInterval("scrollUp()",speed);
  15. area.scrollTop++;
  16. }
  17. // 判断函数;
  18. function scrollUp(){
  19. // 判断是否为行数的整数倍;
  20. if(area.scrollTop % iLineHeight == 0){
  21. clearInterval(time);
  22. // 设置延迟;
  23. setTimeout(startScroll,delay);
  24. }else{
  25. area.scrollTop++;
  26. // 判断是否已经到头,若是,初始化;
  27. if(area.scrollTop >= area.scrollHeight/2){
  28. area.scrollTop = 0;
  29. }
  30. }
  31. }
  32. // 启动整个函数;
  33. setTimeout(startScroll,delay);

附:参考

慕课:信息滚动效果制作
Demo下载-Marquee
Demo下载-无缝滚动
Demo下载-间歇性滚动

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注