新闻滚动条

<!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" onmouseover="this.stop();" onmouseout="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 scrollMove() {
box.scrollTop++;
timer = setInterval(scrollDelay, speed);
};
setTimeout(scrollMove, delay);
})();
</script>
</body>

</html>

posted @ 2016-12-14 16:57 JS小灰童鞋阅读(122) 评论(0) 收藏举报

刷新页面返回顶部