无缝滚动_html-js-css

概述&lt!DOCTYPE html&gt&lthtml&gt &lthead&gt &ltmeta charset="utf-8" /&gt &lttitle&gt向上无缝滚动&lt/title&gt &ltstyle&gt body { font-si
<!DOCTYPE  HTML><HTML>     <head>        <Meta charset="utf⑻" />        <Title>向上无缝转动</Title>        <style>            body {                @H_502_37@Font-size: 12px;                @H_502_37@line-height: 24px;                @H_502_37@text-algin: center;                /* 页面内容居中 */            @H_502_37@}            * {                @H_502_37@margin: 0px;                @H_502_37@padding: 0px;                /*  去掉所有标签的marign和padding的值  */            @H_502_37@}            ul {                @H_502_37@List-style: none;                /*  去掉ul标签默许的点样式  */            @H_502_37@}            a img {                @H_502_37@border: none;                /*  超链接下，图片的边框  */            @H_502_37@}            a {                @H_502_37@color: #333;                @H_502_37@text-decoration: none;                /* 超链接样式 */            @H_502_37@}            a:hover {                @H_502_37@color: #ff0000;            @H_502_37@}            #mooc {                @H_502_37@wIDth: 399px;                @H_502_37@border: 5px solID red;                @H_502_37@-moz-border-radius: 15px;                /* Gecko browsers */                @H_502_37@-webkit-border-radius: 15px;                /* Webkit browsers */                @H_502_37@border-radius: 15px;                @H_502_37@Box-shadow: 2px 2px 10px green;                @H_502_37@margin: 50px auto 0;                @H_502_37@text-align: left;                /* 让新闻内容靠左 */            @H_502_37@}            /*  头部样式 */            #moocTitle {                @H_502_37@height: 62px;                @H_502_37@overflow: hIDden;                /* 这个1定要加上，内容超越的部份要隐藏，免得撑高头部 */                @H_502_37@Font-size: 26px;                @H_502_37@line-height: 62px;                @H_502_37@padding-left: 30px;                @H_502_37@background-image: -moz-linear-gradIEnt(top,#f05e6f,#c9394a);                /* firefox */                @H_502_37@background-image: -webkit-gradIEnt(linear,left top,left bottom,color-stop(0,#f05e6f),color-stop(1,#c9394a));                /* Saf4+,Chrome */                @H_502_37@filter: progID: DXImagetransform.Microsoft.gradIEnt(startcolorstr='#8fa1ff',endcolorstr='#f05e6f',GradIEntType='0');                /* IE*/                @H_502_37@border: 1px solID black;                @H_502_37@-moz-border-radius: 8px 8px 0 0;                /* Gecko browsers */                @H_502_37@-webkit-border-radius: 8px 8px 0 0;                /* Webkit browsers */                @H_502_37@border-radius: 8px 8px 0 0;                @H_502_37@color: #fff;                @H_502_37@position: relative;            @H_502_37@}            #moocTitle a {                @H_502_37@position: absolute;                @H_502_37@right: 10px;                @H_502_37@bottom: 10px;                @H_502_37@display: inline;                @H_502_37@color: #fff;                @H_502_37@Font-size: 12px;                @H_502_37@line-height: 24px;                @H_502_37@color: blue;            @H_502_37@}            /*  底部样式 */            #moocBot {                @H_502_37@wIDth: 399px;                @H_502_37@height: 10px;                @H_502_37@overflow: hIDden;                /* 这个1定要加上，内容超越的部份要隐藏，免得撑高底部结构 */            @H_502_37@}            /*  中间样式 */            #moocBox {                @H_502_37@height: 144px;                @H_502_37@wIDth: 335px;                @H_502_37@margin-left: 25px;                @H_502_37@margin-top: 10px;                @H_502_37@overflow: scroll;                @H_502_37@border: 1px solID red;                 /*  这个1定要加，超越的内容部份要隐藏，免得撑高中间部份 */            @H_502_37@}            #mooc ul li {                @H_502_37@height: 24px;            @H_502_37@}            #mooc ul li a {                @H_502_37@wIDth: 180px;                @H_502_37@float: left;                @H_502_37@display: block;                @H_502_37@overflow: hIDden;                @H_502_37@text-indent: 15px;                @H_502_37@height: 24px;            @H_502_37@}            #mooc ul li span {                @H_502_37@float: right;                @H_502_37@color: green;            @H_502_37@}        </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>