您的位置：首页 > Web前端 > JavaScript

javascript运动框架---2--缓冲运动

2015-08-04 14:45 627 查看

<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 100px;
height: 100px;
background: red;
border: 1px solid green;
position: absolute;
right: 0;
top: 500px;
z-index: 1000;
}

textarea {
position: fixed;
left: 0;
top: 100px;
}

button {
position: fixed;
left: 0;
top: 300px;
width: 100px;
height: 30px;
}

span {
width: 1px;
height: 100px;
border-right: 1px solid black;
position: absolute;
left: 300px;
top: 0;
}
</style>
</head>

<body style="height:3000px;">
<textarea name="" id="" cols="30" rows="10"></textarea>
<div>div1</div>
<span></span>
<button>开始运动</button>
<script src="test.js"></script>
<script>
window.onload = function() {
var oDiv1 = document.getElementsByTagName('div')[0];
var oBtn = document.getElementsByTagName('button')[0];

window.onscroll = function() {
var st = document.documentElement.scrollTop || document.body.scrollTop;
var t = st + (document.documentElement.clientHeight || document.body.clientHeight) / 2;
move(oDiv1,parseInt(t));
// console.log(2);
}

}
</script>
</body>

/**
* [getStyle 获取计算出来的样式]
* @param  {[type]} obj  [元素对象]
* @param  {[type]} attr [属性名]
* @return {[type]}      [对应属性名的值]
*/
function getStyle(obj, attr) {
if (obj.currentStyle) {
// IE
return obj.currentStyle[attr];
} else {
// 其他
return getComputedStyle(obj, false)[attr];
}
}
var timer = null;

var alpha = 38;

function move(obj, target) {
// 宽度动画

// 解决重复触发定时器
clearInterval(timer);
timer = setInterval(function() {

var top = parseInt(getStyle(obj, 'top'));

if (top < target) {
speed = 10;
} else {
speed = -10;
}

if (top == target) {
clearInterval(timer);
} else {
obj.style.top = top + speed + 'px';

4000
}

var oTextarea = document.getElementsByTagName('textarea')[0];
oTextarea.value += top + '\n';

}, 30);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航