一、html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部和懒加载</title>
<script src="jquery-3.1.1.min.js"></script>
<style>
body,html,p{margin:0;padding:0}
.container{width:980px;margin:0 auto;background: #ddd}
.pr{position:relative;}
img{display:block;border:none;}
.sideBar{width:40px;height:42px;position:absolute;top:848px;right:20px;background: #eee;padding: 10px 0;}
.sideBar:hover{cursor: pointer;background: #ddd;}
.sideBar p{padding-left: 6px;font-size:14px;color:#000;}
.sideBar p:hover{color:red;}
#toTop{width:0;height:0;border-style:solid;border-width:0px 10px 10px 10px;border-color:transparent transparent red transparent; line-height: 0px;_border-color: #000000 #000000 red #000000;_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');margin-left: 10px}
</style>
</head>
<body>
<div class="container">
<div class="pr b1">
<img src="images/1.jpg" alt="">
</div>
<div class="pr b2">
<img src="images/2.jpg" alt="2">
</div>
<div class="pr b3">
<img src="images/3.jpg" alt="3">
</div>
<div class="pr b4 bg">
</div>
<div class="pr b5 bg">
</div>
<div class="pr b6 bg">
</div>
<div class="pr b7 bg">
</div>
<div class="pr b8 bg">
</div>
<button>点击查看</button>
</div>
<div class="sideBar" style="display:none">
<p>返回顶部</p>
<div id="toTop"></div>
</div>
<script>
/*
*实现返回顶部
和懒加载
*/
imgkv=new Image()
imgkv.src="images/11.jpg"
$("button").click(function(){
$(".b1 img").attr('src', imgkv.src);
});
$(window).scroll(function(){
var w_s=$(window).scrollTop()
var w_h=$(window).height()
var demo="demo";//初始化css变量
if (w_s<=100) {
$(".sideBar").hide()
}else{
$(".sideBar").show();
lazyloading(demo);
$(".sideBar").stop(true).animate({top: ((w_s+w_h)-62)+"px"})
}
})
$(".sideBar").bind('click',function(){
$("html,body").animate({scrollTop: 0}, 100)
return false;
});
function lazyloading(css_source){
if (!document.getElementById(css_source)) {
var link = document.createElement("link");
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = "css/"+css_source+".css";
link.id=css_source;
document.getElementsByTagName("head")[0].appendChild(link);
}
}
</script>
</body>
</html>
二、引用的css:
.bg{width:980px;
background-repeat: no-repeat;
background-position: 0 0;}
.b4{height:370px;
background-image: url(../images/4.jpg);}
.b5{height:410px;
background-image: url(../images/5.jpg);}
.b6{height:330px;
background-image: url(../images/6.jpg);}
.b7{height:360px;
background-image: url(../images/7.jpg);}
.b8{height:390px;
background-image: url(../images/8.jpg);}
三、jquery版本我引用的为最新的
在jquery插件库这个网站可以下载引用(实时更新的)
四、关于图片可以自行找宽为980px的即可
最后:
说下主要原理:
1、返回顶部是绝对定位一个div,然后这个div的display设置为none,然后通过jquery的.scroll()方法来动态改变显示和隐藏,并且同时改变top值。
2、懒加载是监听.scroll()方法来加载未加载css样式文件