HTML, CSS, and jQuery: Make an auto-scrolling bulletin board

HTML, CSS and jQuery: Make an automatic scrolling bulletin board

In modern web design, bulletin boards are often used to convey important information and attract users Notice. An auto-scrolling bulletin board is widely used on web pages. It allows the bulletin content to scroll and display on the page in the form of animation, improving the information display effect and user experience. This article will introduce how to use HTML, CSS and jQuery to make an auto-scrolling bulletin board, and provide specific code examples.

First of all, we need an HTML structure to store the announcement content. The following is a simple HTML structure example:

<div class="notice-board">
  <ul class="notice-list">
    <li>这是第一条公告</li>
    <li>这是第二条公告</li>
    <li>这是第三条公告</li>
    <li>这是第四条公告</li>
  </ul>
</div>

In the above code, we use a <ul></ul> element to contain the list of announcements, and each announcement uses <li> elements are represented. </li>

Next, we need to use CSS to define the style of the bulletin board. The following is a basic CSS style example:

.notice-board {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: scroll 10s infinite;
  animation-timing-function: linear;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  
  100% {
    transform: translateY(-100%);
  }
}

In the above code, we set a fixed width and height to the bulletin board container, and use overflow: hidden; to hide beyond the container The contents of the range. The announcement list uses an unordered list style, and the scrolling effect is achieved through CSS animation@keyframes.

Finally, we need to use jQuery to control the scrolling behavior of the bulletin board. The following is a jQuery-based code example:

$(document).ready(function() {
  var noticeHeight = $('.notice-list li').outerHeight();
  var noticeNumber = $('.notice-list li').length;
  var totalHeight = noticeHeight * noticeNumber;

  $('.notice-list').css('height', totalHeight + 'px');

  function loop() {
    $('.notice-list').animate({
      top: -noticeHeight
    }, 500, function() {
      $('.notice-list li:first').appendTo('.notice-list');
      $('.notice-list').css('top', '0');
    });

    setTimeout(loop, 3000);
  }

  loop();
});

In the above code, we first obtain the height of each announcement and calculate the total height of the announcement board. We then adjust the height of the announcement list so that it completely contains all announcements, and initialize the starting position of the scroll.

Next, we define a loop function loop() to implement automatic scrolling of the bulletin board. In the loop function, we use the animate() function to implement the scrolling animation, and after the animation is completed, move the first announcement to the end to achieve the effect of infinite loop scrolling.

Finally, we use the setTimeout() function to call the loop function regularly to realize automatic scrolling of the bulletin board, and set the scrolling interval to 3 seconds.

With the above HTML, CSS and jQuery code, we successfully created an automatic scrolling bulletin board. You can copy the above code into your web page file and modify and customize it according to actual needs.

Summary
This article introduces the steps and specific code examples to use HTML, CSS and jQuery to create an automatic scrolling bulletin board. By properly structuring HTML content, defining CSS styles, and using jQuery to control scrolling behavior, we can easily implement a dynamic bulletin board to improve information presentation and user experience. I hope this article is helpful to you, and I wish you better results in web design!

The above is the detailed content of HTML, CSS, and jQuery: Make an auto-scrolling bulletin board. For more information, please follow other related articles on the PHP Chinese website!