码迷,mamicode.com
首页 > 其他好文 > 详细

文字列表滚动(文字轮播)

时间:2017-02-17 13:54:43      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:ext   列表   charset   padding   style   个人   title   pre   flow   

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * { margin: 0;padding: 0;}
        #div1 {
            top:100px;
            position: relative;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 10px auto;
            overflow: hidden;
            background-color:lightblue;
        }
            #div1 ul {
		position: absolute;left: 0;
	}

                #div1 ul li {
                    list-style: none;
                    float: left;
                    width: 200px;
                    height: 30px;
                    padding: 10px;
                }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);
            var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
            var aLi = oUl.getElementsByTagName(‘li‘);
            var timer = null;
            var iSpeed = -5;
            oUl.innerHTML += oUl.innerHTML;
            oUl.style.height = aLi.length * aLi[0].offsetHeight + ‘px‘;
            timer =setTimeout(fnMove, 100);
            oDiv.onmouseover = function () {
                clearInterval(timer);
            }
            oDiv.onmouseout = function () {
                clearInterval(timer);
                timer = setInterval(fnMove, 100);
            }
            function fnMove() {
                if (oUl.offsetTop < -oUl.offsetHeight / 2) {
                    oUl.style.top = 0;
                }
                oUl.style.top = oUl.offsetTop + iSpeed + ‘px‘;
                if ((oUl.offsetTop % 50) == 0) {
                    clearInterval(timer);
                    timer =setTimeout(fnMove, 2000);

                } else {
                    clearInterval(timer);
                    timer = setTimeout(fnMove, 100);
                }
            }
        }
    </script>
        </head>
        <body>
            <div id="div1">
              <ul>
                <li>明天你是否会想起曾经我写的日记</li>
                <li>一个人的时候不是不像你</li>
                <li>一个人的时候只是怕想你</li>
                <li>一个人的时候如果下起了雨</li>
                <li>我也会学你把伞丢到一边</li>
                <li>七月份的尾巴你是狮子座</li>
              </ul>
            </div>
        </body>
        </html>

 

文字列表滚动(文字轮播)

标签:ext   列表   charset   padding   style   个人   title   pre   flow   

原文地址:http://www.cnblogs.com/shoolnight/p/6409448.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!