您當(dāng)前位置：首頁 > web前端 > htmlcss > 無縫滾動

無縫滾動

來源：程序員人生發(fā)布時間：2016-09-07 16:34:39 閱讀次數(shù)：3076次

<!DOCTYPE  html>
<html> 

    <head>
        <meta charset="utf⑻" />
        <title>向上無縫轉(zhuǎn)動</title>
        <style>
            body {
                font-size: 12px;
                line-height: 24px;
                text-algin: center;
                /* 頁面內(nèi)容居中 */
            }

            * {
                margin: 0px;
                padding: 0px;
                /*  去掉所有標(biāo)簽的marign和padding的值  */
            }

            ul {
                list-style: none;
                /*  去掉ul標(biāo)簽?zāi)S的點樣式  */
            }

            a img {
                border: none;
                /*  超鏈接下，圖片的邊框  */
            }

            a {
                color: #333;
                text-decoration: none;
                /* 超鏈接樣式 */
            }

            a:hover {
                color: #ff0000;
            }

            #mooc {
                width: 399px;
                border: 5px solid red;
                -moz-border-radius: 15px;
                /* Gecko browsers */
                -webkit-border-radius: 15px;
                /* Webkit browsers */
                border-radius: 15px;
                box-shadow: 2px 2px 10px green;
                margin: 50px auto 0;
                text-align: left;
                /* 讓新聞內(nèi)容靠左 */
            }
            /*  頭部樣式 */

            #moocTitle {
                height: 62px;
                overflow: hidden;
                /* 這個1定要加上，內(nèi)容超越的部份要隱藏，免得撐高頭部 */
                font-size: 26px;
                line-height: 62px;
                padding-left: 30px;
                background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
                /* Firefox */
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
                /* Saf4+, Chrome */
                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
                /* IE*/
                border: 1px solid black;
                -moz-border-radius: 8px 8px 0 0;
                /* Gecko browsers */
                -webkit-border-radius: 8px 8px 0 0;
                /* Webkit browsers */
                border-radius: 8px 8px 0 0;
                color: #fff;
                position: relative;
            }

            #moocTitle a {
                position: absolute;
                right: 10px;
                bottom: 10px;
                display: inline;
                color: #fff;
                font-size: 12px;
                line-height: 24px;
                color: blue;
            }
            /*  底部樣式 */

            #moocBot {
                width: 399px;
                height: 10px;
                overflow: hidden;
                /* 這個1定要加上，內(nèi)容超越的部份要隱藏，免得撐高底部結(jié)構(gòu) */
            }
            /*  中間樣式 */

            #moocBox {
                height: 144px;
                width: 335px;
                margin-left: 25px;
                margin-top: 10px;
                overflow: scroll;
                border: 1px solid red; 
                /*  這個1定要加，超越的內(nèi)容部份要隱藏，免得撐高中間部份 */
            }

            #mooc ul li {
                height: 24px;
            }

            #mooc ul li a {
                width: 180px;
                float: left;
                display: block;
                overflow: hidden;
                text-indent: 15px;
                height: 24px;
            }

            #mooc ul li span {
                float: right;
                color: green;
            }
        </style>
    </head>

    <body>

        <div id="mooc">

            <h3 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h3>

            <div id="moocBox">
                <ul id="con1">
                    <li><a href="#">1.學(xué)會html5 絕對的屌絲逆襲（案例）</a><span>2013-09⑴8</span></li>
                    <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013⑴0-09</span></li>
                    <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013⑴0⑵1</span></li>
                    <li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013⑴1-01</span></li>
                    <li><a href="#">5.分頁頁碼制作（案例）</a><span>2013⑴1-06</span></li>
                    <li><a href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013⑴1-08</span></li>
                    <li><a href="#">7.信息列表制作(案例)</a><span>2013⑴1⑴5</span></li>
                    <li><a href="#">8.下拉菜單制作(案例)</a><span>2013⑴1⑵2</span></li>
                    <li><a href="#">9.如何實現(xiàn)“新手引導(dǎo)”效果</a><span>2013⑴2-06</span></li>
                </ul>
                <ul id="con2">
                </ul>
            </div>

        </div>

        <script type="text/javascript">
            var area = document.getElementById('moocBox');
            var con1 = document.getElementById('con1');
            var con2 = document.getElementById('con2');
            var speed = 50;
            area.scrollTop =  0;
            con2.innerHTML = con1.innerHTML;

            function scrollUp() {
                if (area.scrollTop >= con1.scrollHeight) {
                    area.scrollTop = 0;
                } else {
                    area.scrollTop++;
                }
            }

            var myScroll = setInterval("scrollUp()", speed);
            area.onmouseover = function() {
                clearInterval(myScroll);
            }
            area.onmouseout = function() {
                myScroll = setInterval("scrollUp()", speed);
            }
        </script>
    </body>

</html>

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 JQuery從0到大技術(shù)牛人學(xué)習(xí)之路！

下一篇 iOS控件之UIActivityIndicatorView

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

無縫滾動