边栏层滚动运动缓存
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>側边滚动运动</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
position: absolute;
background: green;
right: 0px;
}
body {
height: 1000px;
}
</style>
</head>
<script type="text/javascript">
window.onload = function() {
document.onscroll = function() {
var oDiv1 = document.getElementById("div1");
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var i = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2;
//oDiv1.style.top = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
// oDiv1.innerHTML = iScrollTop + (iClientHeight - oDiv1.offsetHeight) / 2 + "px";
startMove(oDiv1, parseInt(i));//paserInt是防止抖动，目标点取整
};
var oTimer = null;
function startMove(obj, iTarget) {
clearInterval(oTimer);
oTimer = setInterval(function() {
//速度
var iSpeed = (iTarget - obj.offsetTop) /8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//速度取整
if (obj.offsetTop == iTarget) {
clearInterval(oTimer);
} else {
obj.style.top = obj.offsetTop + iSpeed + "px";//层运动
};
}, 30);
};
};
</script>
<body>
<div id="div1">
</div>
</body>
</html>
版权声明：本文博主原创文章。博客，未经同意不得转载。
