写一个dv-scroll-board鼠标移入信息显示完整的demo

好的，以下是一个简单的dv-scroll-board鼠标移入信息显示完整的示例代码：

HTML代码：

<div class="scroll-board">
  <ul>
    <li>这是一条消息1</li>
    <li>这是一条消息2</li>
    <li>这是一条消息3</li>
    <li>这是一条消息4</li>
    <li>这是一条消息5</li>
  </ul>
</div>

CSS代码：

.scroll-board {
  width: 300px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.scroll-board ul {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: scroll-board 10s linear infinite;
}

.scroll-board ul li {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  white-space: nowrap;
}

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

JavaScript代码：

var scrollBoard = document.querySelector('.scroll-board');
var messageList = scrollBoard.querySelector('ul');
var messageItems = messageList.querySelectorAll('li');

messageList.addEventListener('mouseover', function(e) {
  if (e.target.nodeName === 'LI') {
    e.target.setAttribute('title', e.target.textContent);
  }
});

messageList.addEventListener('mouseout', function(e) {
  if (e.target.nodeName === 'LI') {
    e.target.removeAttribute('title');
  }
});

以上代码实现了一个可滚动的消息列表，并通过鼠标移入显示完整信息的效果。当鼠标移入某条消息时，该消息将显示完整内容；当鼠标移出时，完整内容消失。