<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 3000px;
}
#box{
100px;
height: 150px;
background: red;
position: absolute;
right: 0;
top: 50%;
}
</style>
<div id="box"></div>
<script src="js/move.js"></script>
<script type="text/javascript">
window.onscroll = function(){
var box = document.getElementById("box");
var screenHeight = document.documentElement.clientHeight || document.body.scrollTop;
var boxHei = box.offsetHeight;
var oTop =(screenHeight - boxHei)/2;
var nowScroll = document.documentElement.scrollTop || document.body.scrollTop;
var nowTop = parseInt(oTop+nowScroll);
move(nowTop);
}
var time;
function move(iTarget)
{
var box = document.getElementById("box");
clearInterval(time);
time = setInterval(function(){
var speed = (iTarget - box.offsetTop)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(box.offsetTop == iTarget)
{
clearInterval(time);
}else{
box.style.top = box.offsetTop + speed + "px";
}
},30)
}
</script>
move.js
//一次改進版
//function move(obj, attr, end, start, stepNum) {
//
// var speed = (end - start) / stepNum;
// this.time = setInterval(function() {
// start += speed;
// if (start >= end && speed > 0) {
// clearInterval(this.time);
// start = end;
// }
// if (start <= end && speed < 0) {
// clearInterval(this.time);
// start = end;
// }
// obj.style[attr] = start + "px";
// }, 10)
//}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj)[attr];
}
}
//二次改進版
function move(obj, attr, end,stepNum,fn) {
var start = parseInt(getStyle(obj,attr));
var speed = (end - start) / stepNum;
clearInterval(obj.time);
obj.time = setInterval(function() {
start += speed;
if (start >= end && speed > 0) {
clearInterval(obj.time);
start = end;
if(fn){
fn();
}
}
if (start <= end && speed < 0) {
clearInterval(obj.time);
start = end;
if(fn)
{
fn();
}
}
obj.style[attr] = start + "px";
}, 10)
}
利用jq实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.2.1.js"></script>
<style>
#box{
100px;
height:100px;
background-color:red;
position:absolute;
left: 0;
top:50%;
transform:translateY(-50px);
}
</style>
</head>
<body style="height:2000px">
<div id="box">
</div>
<script>
$(function(){
var defaul = $('#box');
var defaultTop = defaul.offset().top
$(window).on('scroll',function(){src()});
function src(){
var offsetTop = defaultTop + $(window).scrollTop()+"px";
defaul.animate({top:offsetTop},
{
duration:600,
queue:false
})
}
})
</script>
</body>
</html>