什么都没显示,有图片

来源:3-1 定位在头部的进度条

慕先生3356621

2017-07-15 20:42

<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8" />

<title>进度条2</title>

<style>

.loading {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

.loading.pic {

width: 0%;

height: 5px;

position: absolute;

top: 0;

left: 0;

background-color: deeppink;

}

</style>

<script src="js/jquery-1.3.2.min.js"></script>

</head>


<body>

<div class="loading">

<div class="pic">

</div>

</div>

<header>

<img src="img/2.jpg" alt="" />

</header>

<script>

$(".loading.pic").animate({

width: "30%"

}, 100)

</script>

<section class="banner">

<img src="img/3.jpg" alt="" />

<img src="img/4.jpg" alt="" />

</section>

<script>

$(".loading.pic").animate({

width: "50%"

}, 100)

</script>

<section class="about">

<img src="img/5.jpg" alt="" />

<img src="img/6.jpg" alt="" /></section>

<script>

$(".loading.pic").animate({

width: "70%"

}, 100)

</script>

<section class="pro">

<img src="img/1.jpg" alt="" />

<img src="img/2.jpg" alt="" />

</section>

<script>

$(".loading.pic").animate({

width: "80%"

}, 100)

</script>

<section class="news">

<img src="img/5.jpg" alt="" />

<img src="img/6.jpg" alt="" />

</section>

<script>

$(".loading.pic").animate({

width: "90%"

}, 100)

</script>

<footer>

<img src="img/7.jpg" alt="" />

<img src="img/8.jpg" alt="" />

</footer>

<script>

$(".loading.pic").animate({

width: "100%"

}, 100, function() {

$(".loading").fadeOut();

})

</script>

</body>


</html>


写回答 关注

2回答

  • 慕先生3356621
    2017-07-17 22:31:29

    项目文件夹里有图片,就是在网页里显示不了

  • 自由的气息
    2017-07-15 23:35:33

    有点矛盾呢?

常用的网页加载进度条

通过课程,让你学习到网页中常见的进度加载的实现方式.

32872 学习 · 81 问题

查看课程

相似问题