<head>
<meta charset="utf-8" />
<title>每3秒向上滾動</title>
</head>
<style type="text/css">
._container {
height: 36px;
overflow: hidden;
border-bottom: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}
._container li {
height: 36px;
line-height: 36px;
font-size: 18px;
}
._container li:first-child {
margin-top: 0;
transition: margin-top .8s;
}
</style>
<body>
<ul class="_container" id="demo">
<li>我是第一個出現的</li>
<li>我是第二個出現的</li>
<li>我是第三個出現的</li>
<li>我是第四個出現的</li>
<li>我要開始循環了(第五個)</li>
</ul>
</body>
<script type="text/javascript">
function Scroll() {}
Scroll.prototype.upScroll = function(dom, _h, interval) {
var dom = document.getElementById(dom);
var timer = setTimeout(function() {
var _field = dom.firstElementChild;
_field.style.marginTop = _h;
clearTimeout(timer);
}, 1000)
setInterval(function() {
var _field = dom.firstElementChild;
_field.style.marginTop = "0px";
dom.appendChild(_field);
var _field = dom.firstElementChild
_field.style.marginTop = _h;
}, interval)
}
var myScroll = new Scroll();
/*這是啓動方式*/
/*
* demo 父容器(ul)的id
* -36px 子元素li的高度
* 3000 滾動間隔時間
* 每次滾動持續時間可到css文件中修改
*/
myScroll.upScroll("demo", "-36px", 3000);
</script>
原生js 實現文字輪播
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章