zoukankan      html  css  js  c++  java
  • 文字滚动特效

    <style>
    #Marquee{
    height:20px;overflow:hidden;
    display:inline-block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;
    }
    #Marquee p{
    height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#888;
    }
    </style>
    <div style="padding:10px;font-size:13px">
    <div style="100%;background:#fff;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;border-radius:5px;-webkit-border-radius:5px;padding:10px 0">
    <span style="display:inline-block;80px;text-align:center"><img src="/images/szsq/tt.png" style="display:block;margin:0 auto;70px;margin-top:-3px"></span>
    <span id="Marquee"><p>今日数字社区“白皮书”各级领区</p></span>
    <span style="display:inline-block;30px;text-align:center"><img src="/images/szsq/huomiao.png" style="display:block;margin:0 auto;15px;margin-top:-3px"></span>
    </div>
    </div>
    <script>
    var Mar = document.getElementById("Marquee");
    var child_div=Mar.getElementsByTagName("p")
    var picH = 20;//移动高度
    var scrollstep=2;//移动步幅,越大越快
    var scrolltime=80;//移动频度(毫秒)越大越慢
    var stoptime=2000;//间断时间(毫秒)
    var tmpH = 0;
    Mar.innerHTML += Mar.innerHTML;
    function start(){
    if(tmpH < picH){
    tmpH += scrollstep;
    if(tmpH > picH )tmpH = picH ;
    Mar.scrollTop = tmpH;
    setTimeout(start,scrolltime);
    }else{
    tmpH = 0;
    Mar.appendChild(child_div[0]);
    Mar.scrollTop = 0;
    setTimeout(start,stoptime);
    }
    }
    $(document).ready(function(){
    setTimeout(start,stoptime);
    });
    </script>

  • 相关阅读:
    ButterKnife 原理解析
    有关java之反射的使用
    Integer 与 int 中的 ==
    下拉框、多选框、单选框 通过TagHelper绑定数据
    动态构建视图表单
    添加我的应用中的后台图标
    标准服务接口示例代码
    .net Core下的 常用方法
    使用Redirect跳转
    标准表单提交示例代码
  • 原文地址:https://www.cnblogs.com/hxlj130520/p/13619426.html
Copyright © 2011-2022 走看看