var QM = (function() {
var exports = {};
function scrollToBottom(func) {
/**
* @判断是否滚动到底部
* @author qingming
*/
var cHeight, sHeight, sTop;
if (document.compatMode == "BackCompat") {
//主要是为了兼容ie
cHeight = document.body.clientHeight;
sHeight = document.body.scrollHeight;
} else {
//document.compatMode == "CSS1Compat"
cHeight = document.documentElement.clientHeight;
sHeight = document.documentElement.scrollHeight;
}
//console.log(cHeight);
//console.log(sHeight);
window.addEventListener("scroll", function(event) {
//scrollLeft、scrollTop很不稳定，就算在firefox和chrome之间，也略有差别
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
//sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
//console.log(sTop);
sTop = Math.ceil(sTop);
//console.log(sTop);
//element.scrollHeight - element.scrollTop === element.clientHeight
if (sTop + cHeight == sHeight) {
func();
}
});
}
exports.scrollToBottom = scrollToBottom;
return exports;
})();
// QM.scrollToBottom(function() {
// console.log('使用方法')
// });
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body,
ul,
li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
overflow: auto;
}
#a {
height: 500px;
display: block;
}
#b {
height: 2000px;
}
</style>
</head>
<body>
<img id='a' src='img/1.jpg' width="100%">
<div id='b'></div>
<script>
var cHeight, sHeight, sTop;
var a = document.getElementById("a");
var h = document.getElementById("a").offsetHeight;
if (document.compatMode == "BackCompat") {
cHeight = document.body.clientHeight;
sHeight = document.body.scrollHeight;
} else {
cHeight = document.documentElement.clientHeight;
sHeight = document.documentElement.scrollHeight;
}
window.addEventListener("scroll", function(event) {
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
sTop = Math.ceil(sTop);
if (sTop > h * 0.5) {
a.src = 'img/5.jpg';
a.style.transform = 'scale(0.05)';
} else if (h * 0.38 < sTop && sTop < h * 0.5) {
a.src = 'img/4.jpg';
a.style.transform = 'scale(0.2)';
} else if (h * 0.35 < sTop && sTop < h * 0.38) {
a.src = 'img/3.jpg';
a.style.transform = 'scale(0.28)';
} else if (h * 0.2 < sTop && sTop < h * 0.35) {
a.src = 'img/2.jpg';
a.style.transform = 'scale(0.6)';
} else if (sTop < h * 0.2) {
a.src = 'img/1.jpg';
a.style.transform = 'scale(1)';
}
});
</script>
</body>
</html>
