<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="" />
<title>marquee</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
line-height: 24px;
text-align: center;
}
ul {
list-style: none;
}
a {
color: #333333;
font-size: 12px;
text-decoration: none;
}
li {
text-align: center;
}
#box {
width: 100px;
height: 24px;
margin: 50px auto;
overflow: hidden;
}
#_box {
width: 100px;
height: 24px;
margin: 50px auto;
overflow: hidden;
}
marquee {
margin: 0 auto;
}
</style>
</head>
<body>
<marquee direction="up" scrollamount="2" height="24" width="100" οnmοuseοver="this.stop();" οnmοuseοut="this.start();">
<ul>
<li><a href="javascript:;">111111111111</a></li>
<li><a href="javascript:;">222222222222</a></li>
<li><a href="javascript:;">333333333333</a></li>
<li><a href="javascript:;">444444444444</a></li>
<li><a href="javascript:;">555555555555</a></li>
<li><a href="javascript:;">666666666666</a></li>
<li><a href="javascript:;">777777777777</a></li>
<li><a href="javascript:;">888888888888</a></li>
<li><a href="javascript:;">999999999999</a></li>
</ul>
</marquee>
<div id="box">
<ul id="cont1">
<li><a href="javascript:;">111111111111</a></li>
<li><a href="javascript:;">222222222222</a></li>
<li><a href="javascript:;">333333333333</a></li>
<li><a href="javascript:;">444444444444</a></li>
<li><a href="javascript:;">555555555555</a></li>
<li><a href="javascript:;">666666666666</a></li>
<li><a href="javascript:;">777777777777</a></li>
<li><a href="javascript:;">888888888888</a></li>
<li><a href="javascript:;">999999999999</a></li>
</ul>
<ul id="cont2"></ul>
</div>
<div id="_box">
<ul>
<li><a href="javascript:;">111111111111</a></li>
<li><a href="javascript:;">222222222222</a></li>
<li><a href="javascript:;">333333333333</a></li>
<li><a href="javascript:;">444444444444</a></li>
<li><a href="javascript:;">555555555555</a></li>
<li><a href="javascript:;">666666666666</a></li>
<li><a href="javascript:;">777777777777</a></li>
<li><a href="javascript:;">888888888888</a></li>
<li><a href="javascript:;">999999999999</a></li>
</ul>
</div>
<script type="text/javascript">
;
(function() {
var box = document.getElementById('box');
var cont1 = document.getElementById('cont1');
var cont2 = document.getElementById('cont2');
var speed = 50;
box.scrollTop = 0;
cont2.innerHTML = cont1.innerHTML;
function myScroll() {
if (box.scrollTop >= cont1.scrollHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
}
var timer = setInterval(myScroll, speed);
box.onmouseover = function() {
clearInterval(timer);
};
box.onmouseout = function() {
timer = setInterval(myScroll, speed);
};
})();
</script>
<script type="text/javascript">
;
(function() {
var box = document.getElementById('_box');
var timer = null;
var delay = 1500;
var speed = 30;
liH = 24;
box.innerHTML += box.innerHTML;
box.scrollTop = 0;
function scrollDelay() {
if (box.scrollTop % liH == 0) {
clearInterval(timer);
setTimeout(scrollMove, delay);
} else {
box.scrollTop++;
if (box.scrollTop >= box.scrollHeight / 2) {
box.scrollTop = 0;
}
}
}
function scrollMove() {
box.scrollTop++;
timer = setInterval(scrollDelay, speed);
};
setTimeout(scrollMove, delay);
})();
</script>
</body>
</html>