jquery marquee从上到下而不是从右到左制作卷轴

Question

我想让我的选框滚动从上到下，而不是从右到左。

我在网上使用jquery .animate，但是我可以弄清楚如何在从右到左移动时滚动

jQuery(document).ready(function($) {
  var marquee = function() {
    var window_width = window.innerWidth;
    var speed = 12 * window_width;
    $('#marquee li:first').animate( {left: '-980px'}, speed, 'linear', function() {
      $(this).detach().appendTo('#marquee ul').css('', "100%");
      marquee();
    });
  };
  if ($("#marquee li").length > 1) {
    marquee();
  }
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#marquee {
  background: #090;
  font-family: Arial, Verdana, sans-serif;
  color: #FFF;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  width: 1035px;
}

#marquee ul {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}

#marquee li {
  width: 980px;
  line-height: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 100%;
  text-align: center;
  list-style: none;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee">
	<ul>  
    <li>test 1</li>
    <li>test 2</li>
  </ul>
</div>

Answer 1

你需要调整它才能在Y而不是X上工作，所以切换高度宽度，你需要定位固定或绝对，所以它跨越整个窗口高度。

$(document).ready(function($) {
  var marquee = function() {
    var window_height = window.innerHeight;
    var speed = 12 * window_height;
    $('#marquee li:first').animate( {top: '100%'}, speed, 'linear', function() {
      $(this).detach().appendTo('#marquee ul').css('', "100%");
      marquee();
    });
  };
  marquee();
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#marquee {
  background: #090;
  font-family: Arial, Verdana, sans-serif;
  color: #FFF;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  width: 100px;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
}

#marquee ul {
  width: 100%;
  padding:0;
  margin:0;
  height:100%;
}

#marquee li {
  width: 100px;
  line-height: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  left: 0;
  text-align: center;
  list-style: none;
  font-size:14px;

}

工作示例 - https://jsfiddle.net/7sunt6fz/1/