您当前位置：首页 > web前端 > htmlcss > 无缝滚动
无缝滚动

来源：程序员人生发布时间：2016-09-07 16:34:39 阅读次数：2863次
<!DOCTYPE  html>
<html> 

    <head>
        <meta charset="utf⑻" />
        <title>向上无缝转动</title>
        <style>
            body {
                font-size: 12px;
                line-height: 24px;
                text-algin: center;
                /* 页面内容居中 */
            }

            * {
                margin: 0px;
                padding: 0px;
                /*  去掉所有标签的marign和padding的值  */
            }

            ul {
                list-style: none;
                /*  去掉ul标签默许的点样式  */
            }

            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;
                /* 让新闻内容靠左 */
            }
            /*  头部样式 */

            #moocTitle {
                height: 62px;
                overflow: hidden;
                /* 这个1定要加上，内容超越的部份要隐藏，免得撑高头部 */
                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定要加上，内容超越的部份要隐藏，免得撑高底部结构 */
            }
            /*  中间样式 */

            #moocBox {
                height: 144px;
                width: 335px;
                margin-left: 25px;
                margin-top: 10px;
                overflow: scroll;
                border: 1px solid red; 
                /*  这个1定要加，超越的内容部份要隐藏，免得撑高中间部份 */
            }

            #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.学会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基础课程(系列)</a><span>2013⑴1-01</span></li>
                    <li><a href="#">5.分页页码制作（案例）</a><span>2013⑴1-06</span></li>
                    <li><a href="#">6.导航条菜单的制作（案例）</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.如何实现“新手引导”效果</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>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
上一篇 JQuery从0到大技术牛人学习之路！
下一篇 iOS控件之UIActivityIndicatorView
分享到:
------分隔线----------------------------
为码而活
积分：4237
15粉丝
7关注
栏目热点