!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>悬浮框架</title>
<style>
p{display: block; width: 100%; text-align: center;}
.c1{ position: absolute;left: 0;top: 0}
</style>
</head>
<body>
<div id="div1"> <img src="aside.jpg" alt=""></div>
<script>
for (var i = 0; i <= 100; i++){
document.write("<p>"+"天王盖地虎,卢沟一米5"+"</p>");}
window.onscroll = function(){
var Div1 = document.getElementById("div1");//给div1一个变量
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
Div1.style.top = startMove(document.documentElement.clientHeight - Div1.offsetHeight + scrollTop);
}
var timer = null;
function startMove(iTarget){
clearInterval(timer);
timer = setInterval(function(){
var Div1 = document.getElementById("div1");
var speed = (iTarget - Div1.offsetTop)/4;
speed = speed > 0? Math.ceil(speed) : Math.floor(speed);
if(Div1.offsetTop == iTarget){
clearInterval(timer);
} else {
Div1.style.top = Div1.offsetTop + speed + "px";
}
},30);
}
</script>
</body>
</html>
qq_模棱两可_0
随时随地看视频慕课网APP
相关分类