jQuery按需加载图片及锚点定位、返回顶部,先来看看效果:
一部分关键的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/idex.js"></script>
<script src="js/animate.js"></script>
<script src="js/function.js"></script>
<title>按需加载</title>
<style>
body{background-color: #3c3a3a}
.head{
width: 800px;
height: 380px;
background: #ccc;
margin:0 auto 20px;
}
.floor{
width:800px;
height: 500px;
background-color:#3c3a3a;
margin:50px auto;
text-align: center;
}
.foot{
width: 800px;
height: 380px;
background: #ccc;
margin:0 auto 20px;
}
.jump{
width: 80px;
height: 350px;
position: fixed;
top:30%;left:20px;
cursor: pointer;
}
.item{
color: #cacaca;
width: 100%;
height: 69px;
background-color: #666;
border-bottom: 1px solid #3c3a3a;
text-align: center;
line-height: 69px;
}
.back{
width: 40px;
height: 40px;
background:#ccc;
box-shadow: 0px 3px 10px rgba(0,0,0,0.6);
text-align: center;
line-height: 40px;
font-size: 14px;
position: fixed;
right: 45px;bottom:55px;
display: none;
cursor: pointer;
}
.search{
width: 200px;
height: 100px;
background-color: #e4e4e4;
text-align: center;
line-height: 100px;
position: fixed;
left:0;top:-200px;
}
</style>
</head>
<body>
<div class="search">搜索栏</div>
<div class="back">顶部</div>
<div class="head">这是头部</div>
<div class="floor">
<img src="" alt="" imgpath="http://www.jq22.com/img/cs/500x300-1.png">
</div>
<div class="floor">
<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-2.png">
</div>
<div class="floor">
<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-3.png">
</div>
<div class="floor">
<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-4.png">
</div>
<div class="floor">
<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-5.png">
</div>
<div class="foot">这是底部</div>
<div class="jump">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
全部代码:jQuery按需加载图片及锚点定位效果