2015/10/16

阅读量：2931

发布时间：2015-10-16 21:01:20

---

今日工作

前台about页面设计，显示进度条、页面css选择加载、Move.js循环调用

打车计费APP编码，修改以前的代码，修改bug

 

在页面加载的时候显示进度条如：

html代码：

<div class="mask_progress">
    <div class="progress">
        <div class="progress-bar" style="width:10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
        10
        </div>
    </div>
</div>

css样式：

.mask_progress{

    width: 100%;

    height: 100%;

    z-index: 999;

    background: green;

}

在文档加载到某个部分的时候，页面进度条相应控制代码：

<script type="text/javascript">
    // 调节的进度条
    $(".progress-bar").html("20");
    $(".progress-bar").css("width","20%");   
</script>

在文档完全加载的时候，隐藏遮罩层：

$(document).ready(function(){
    $(".mask_progress").hide();
})

注意事项：

在fullPage和进度条共同显示的时候，没有办法实现fullPage的鼠标滚动事件，在适当的时候可以选择这个进度条

 

---

---

---

发布评论 当前没有评论