<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>www.jb51.net - 間歇循環(huán)滾動</title>
? ? <style>
? ? ? #box {
? ? ? ? height: 200px;
? ? ? ? width: 300px;
? ? ? ? margin: 0 auto;
? ? ? ? border: 1px solid #0066ff;
? ? ? ? overflow: hidden;
? ? ? ? box-sizing: border-box;
? ? ? }
? ? ? #box li {
? ? ? ? color: #333;
? ? ? ? height: 24px;
? ? ? }
? ? ? #box ul {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <div id="box">
? ? ? <ul id="con1">
? ? ? ? <li>腳本之家1</li>
? ? ? ? <li>腳本之家2</li>
? ? ? ? <li>腳本之家3</li>
? ? ? ? <li>腳本之家4</li>
? ? ? ? <li>腳本之家5</li>
? ? ? ? <li>腳本之家6</li>
? ? ? ? <li>腳本之家7</li>
? ? ? ? <li>腳本之家8</li>
? ? ? ? <li>腳本之家9</li>
? ? ? </ul>
? ? </div>
? ? <script>
? ? ? var area = document.getElementById("box");
? ? ? area.innerHTML += area.innerHTML;
? ? ? var count = document.getElementById("con1").getElementsByTagName("li")
? ? ? ? .length;
? ? ? var height1 = 24;
? ? ? area.scrollTop = 0;
? ? ? console.log(area.scrollTop, area.offsetHeight, count);
? ? ? ? function scrollUp() {
? ? ? ? ? console.log(area.scrollTop, area.offsetHeight);
? ? ? ? ? if (area.scrollTop < area.offsetHeight) {
? ? ? ? ? ? area.scrollTop++;
? ? ? ? ? } else {
? ? ? ? ? ? area.scrollTop = 1;
? ? ? ? ? }
? ? ? ? }
? ? ? ? setInterval("scrollUp()", 50);
? ? </script>
? </body>
</html>
