2015/10/16

阅读量:959

发布时间: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的鼠标滚动事件,在适当的时候可以选择这个进度条

 










当前没有评论