大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

html如何实现信息滚动效果

这篇文章主要介绍了html如何实现信息滚动效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联专注于余姚网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供余姚营销型网站建设,余姚网站制作、余姚网页设计、余姚网站官网定制、重庆小程序开发公司服务,打造余姚网络公司原创品牌,更为您提供余姚网站排名全网营销落地服务。

html:




 
 向上无缝滚动
 





 
 最新课程更多>> 
 
 
 
  
   
  • 1.学会html5 绝对的屌丝逆袭(案例)2013-09-18
  •    
  • 2.tab页面切换效果(案例)2013-10-09
  •    
  • 3.圆角水晶按钮制作(案例)2013-10-21
  •    
  • 4.HTML+CSS基础课程(系列)2013-11-01
  •    
  • 5.分页页码制作(案例)2013-11-06
  •    
  • 6.导航条菜单的制作(案例)2013-11-08
  •    
  • 7.信息列表制作(案例)2013-11-15
  •    
  • 8.下拉菜单制作(案例)2013-11-22
  •    
  • 9.如何实现“新手引导”效果2013-12-06
  •           
     

    css:

    body {
     font-size: 12px;
     line-height: 24px;
     text-algin: center;  /* 页面内容居中 */
    }
    body, h4, ul, li, a {
     margin: 0;
     padding: 0;   /* 去掉所有标签的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 #ababab;
     -moz-border-radius: 15px;  /* Gecko browsers */
     -webkit-border-radius: 15px; /* Webkit browsers */
     border-radius: 15px;
     box-shadow: 2px 2px 10px #ababab;
     margin: 50px auto 0;
     text-align: left;    /* 让新闻内容靠左 */
    }
    /* 头部样式 */
    #moocTitle {
     height: 62px;
     overflow: hidden; /* 这个一定要加上,内容超出的部分要隐藏,免得撑高头部 */
     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 #f05e6f;
     -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;
    }
    /* 底部样式 */
    #moocBot {
     width: 399px;
     height: 10px;
     overflow: hidden;  /* 这个一定要加上,内容超出的部分要隐藏,免得撑高底部结构 */
    }
    /* 中间样式 */
    #moocBox {
     height: 144px;
     width: 335px;
     margin-left: 25px;
     margin-top: 10px;
     margin-bottom: 10px;
     overflow: hidden; /* 这个一定要加,超出的内容部分要隐藏,免得撑高中间部分 */
    }
    #mooc ul{
     display: inline-block;
    }
    #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: #999;
    }

    js:

    var box = document.getElementById("moocBox");
    var con1 = document.getElementById("con1");
    var con2 = document.getElementById("con2");
    var speed = 50;
    con2.innerHTML = con1.innerHTML;
    function scrollUp() {
     if(box.scrollTop>=con1.scrollHeight){
      box.scrollTop = 0;
     }else {
      box.scrollTop++;
     }
    }
    var myScroll = setInterval("scrollUp()",speed);
    box.onmouseover = function () {
     clearInterval(myScroll);
    };
    box.onmouseout = function () {
     myScroll = setInterval("scrollUp()",speed);
    }

    效果图:

    html如何实现信息滚动效果

    感谢你能够认真阅读完这篇文章,希望小编分享的“html如何实现信息滚动效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


    当前标题:html如何实现信息滚动效果
    分享链接:http://dzwzjz.com/article/ihohpe.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP