当前位置:Gxlcms > JavaScript > js实现消息滚动效果的方法

js实现消息滚动效果的方法

时间:2021-07-01 10:21:17 帮助过:19人阅读

  1.    <div class="inform" style="">
  2. <div style="height:35px; overflow:hidden;">
  3. <ul id="marquee" style="height:35px;">
  4.             <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">****已预订****</a></li>
  5.              <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">
  6. ****已预订****</a></li>
  7.           </ul>
  8. </div>
  9. <script type="text/javascript">
  10. var liHeight = $('#marquee li').eq(0).outerHeight();
  11. //$('#marquee').css('height',liHeight * $('#marquee li').length * 2);
  12. setTimeout("startmarquee("+ liHeight +", 50, 500, 'marquee')", 500);
  13. function startmarquee(lh,speed,delay,id) {
  14. var t;
  15. var p = false;
  16. var o = document.getElementById(id);
  17. o.innerHTML += o.innerHTML;
  18. o.onmouseover = function() {
  19. p = true;
  20. }
  21. o.onmouseout = function() {
  22. p = false;
  23. }
  24. o.scrollTop = 0;
  25. function start() {
  26. t = setInterval(scrolling,speed);
  27. if(!p) o.scrollTop += 1;
  28. }
  29. function scrolling() {
  30. if(o.scrollTop%lh != 0) {
  31. o.scrollTop += 1;
  32. if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
  33. } else {
  34. clearInterval(t);
  35. setTimeout(start,delay);
  36. }
  37. }
  38. setTimeout(start,delay);
  39. }
  40. </script>
  41. </div>
  1. .inform {
  2. padding: 1px;
  3. margin: 10px auto;
  4. /*position: fixed; bottom:80px;left: 50%;*/ width: 6.8rem;font-size: 12px;/*margin-left: -3.4rem;*/ border: none; background-color:rgba(238,115,115,0.3); border-radius: 10px;
  5. }
  6. .inform h2 {
  7. background: none repeat scroll 0 0 #015198;
  8. font-weight: normal;
  9. line-height: 30px;
  10. }
  11. .inform h2 span {
  12. color: #FFFFFF;
  13. font-size: 16px;
  14. padding-left: 10px;
  15. }
  16. .inform h2 a {
  17. color: #FFFFFF;
  18. float: right;
  19. font-size: 14px;
  20. padding-right: 3px;
  21. }
  22. .inform ul {
  23. height: 170px;
  24. margin-top: 7px;
  25. overflow: hidden;
  26. }
  27. .inform ul li {
  28. line-height: 26px;
  29. padding-left: 12px;
  30. }

以上就是js实现消息滚动效果的方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行