自动向上滚动框的制造

自动向上滚动框的制作
隔一段时间慢慢向上滚动一段距离！如图：


保证不会出现回滚。即由最后一个元素再滚到第一个元素是向上滚动而不是向下。
用ul来制作，一个li相当于每次显示的一行，滚到时的动画效果用transition来制作。
思路是设置显示的这个元素的marginTop值设置为他的行高的负值，一旦动画完成就从ul中删除它并把它添加到ul的最后面，用setInterval调用move实现连续滚动。

html
<div class="hot-city">
					<h5>推荐城市:</h5>
					<div class="city-wrap">
						<ul>
							<li>
								<a href="#">大理</a>
								<a href="#">马尔代夫</a>
								<a href="#">成都</a>
								<a href="#">青岛</a>
								<a href="#">长春</a>
								<a href="#">北京</a>
							</li>
							<li>
								<a href="#">丽江</a>
								<a href="#">阿坝州</a>
								<a href="#">三亚</a>
								<a href="#">厦门</a>
								<a href="#">桂林</a>
								<a href="#">美国</a>
							</li>
							<li>
								<a href="#">塞班岛</a>
								<a href="#">巴厘岛</a>
								<a href="#">欧洲</a>
								<a href="#">泰国</a>
								<a href="#">张家界</a>
								<a href="#">非洲</a>
							</li>
							<li>
								<a href="#">印度尼西亚</a>
								<a href="#">法国</a>
								<a href="#">英国</a>
								<a href="#">新疆旖旎</a>
								<a href="#">泰国</a>
								<a href="#">柬埔寨</a>
							</li>
							
						</ul>
					</div>
css

.hot-city {
    line-height: 30px;
    padding-top: 5px;
}
hot-city h5 {
color: #A9A8A8;
float: left;
}
.city-wrap {
overflow: hidden;
float: left;//float具有收缩宽度的性质。它的宽度会根据元素内容自动调整，于是h5与.city-wrap变成了一行。但是也可以对它们设置inline-block来使其在同一行，但是假如其中之一运用了overflow：hidden则无法对其，此时可以对未应用overflow：hidden的元素设置position：relative。调整top值使其对其。
height: 30px;
padding-left: 5px;
word-spacing: 5px;
width: 400px;
}
.city-wrap li {
line-height: 30px;//ie8以下不支持继承。
width: 400px;
transition: all .9s ease-in-out;
}

js代码
var timer=setInterval(move,3000);
		document.getElementsByClassName('city-wrap')[0].onmouseover=function(){
			clearInterval(timer);
		}
		document.getElementsByClassName('city-wrap')[0].onmouseout=function(){
			timer=setInterval(move,5000);
		}

		function  move(){
			var oParent=document.getElementsByClassName('city-wrap')[0].getElementsByTagName('ul')[0];
			var li=oParent.getElementsByTagName('li');
			var display=li[0];
			display.style.marginTop=-30+'px';
			setTimeout(linear,1000)//超时要大于动画完成时间，不然在它还没有完成时就删除的话无动画效果或者动画效果不完整。
			function linear(){
			oParent.removeChild(display);
			display.style.marginTop=0+'px';
			display.removeAttribute('style');
			oParent.appendChild(display);
			}
			
		}