向上循环滚动

html

	<ul id="marquee" style="height:120px;overflow: hidden;padding: 0px;">
		<li>
			<a href="[field:arcurl/]" target="_blank" title="[field:title/]">Lorem ipsum dolor sempore dus.</a>
			<span class="float-right">2018-7-27</span>
		</li>
		<li>
			<a href="[field:arcurl/]" target="_blank" title="[field:title/]">Lorem ipsum dolor sempore dus.</a>
			<span class="float-right">2018-7-27</span>
		</li>
		<li>
			<a href="[field:arcurl/]" target="_blank" title="[field:title/]">Lorem ipsum dolor sempore dus.</a>
			<span class="float-right">2018-7-27</span>
		</li>
		<li>
			<a href="[field:arcurl/]" target="_blank" title="[field:title/]">Lorem ipsum dolor sempore dus.</a>
			<span class="float-right">2018-7-27</span>
		</li>
		<li>
			<a href="[field:arcurl/]" target="_blank" title="[field:title/]">Lorem ipsum dolor sempore dus.</a>
			<span class="float-right">2018-7-27</span>
		</li>
	</ul>

js

	<script type="text/javascript">
		window.onload = function() {
			setTimeout("startmarquee(100, 50, 0, 'marquee')", 5000);
		}

		function startmarquee(lh, speed, delay, id) {
			var t;
			var p = false;
			var o = document.getElementById(id);
			o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;
			o.onmouseover = function() {
				p = true;
			}
			o.onmouseout = function() {
				p = false;
			}
			o.scrollTop = 0;

			function start() {
				t = setInterval(scrolling, speed);
				if(!p) o.scrollTop += 2;
			}

			function scrolling() {
				if(o.scrollTop % lh != 0) {
					o.scrollTop += 2;
					if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
				} else {
					clearInterval(t);
					setTimeout(start, delay);
				}
			}
			setTimeout(start, delay);
		}
	</script>
posted @ 2018-07-27 14:54  blue星期天  阅读(190)  评论(0编辑  收藏  举报