1.1匀速运动
可以设置div定位的top和left【正向,反向】
正向为例:
//匀速运动:点完button之后,div开始移动 ,div到达黑色线时,停止 s = vt
<head>
div{
width:50px;
height:50px;
background:red;
position:absolute;
left:0px;
top:0px;
}
button{
margin-top:70px;
}
span{
position:absolute;
left:600px;
top:0px;
width:1px;
height:50px;
background:black;
}
</head>
<body>
<div></div>
<button id="btn">run</button>
<span></span>
<script>
var oDiv = document.getElementsByTagName('div');
var oBtn = document.getElementById('btn')
//绑定事件
var timer = null;
oBtn.onclick = function(){
startMove();
}
function startMove(){
//30毫秒后执行 s = vt
//清空之前触发事件的次数 每次点击运动时,速度一样
clearInterval(timer);
var iSpeed = 100-oDiv.offsetLeft > 0 ? 7 : -7;
timer = setInterval(function(){
if(Math.abs(100 -oDiv.offsetLeft) < Math.abs(iSpeed)){
clearInterval(timer);
oDiv.style.left = '600px';
}else{
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
//oDiv.offsetLeft:获取div的left属性
}
},30)
}
</script>
</body>
1.2.封装运动函数(匀速运动)
oBtn.onclick = function(){
//s = v t
startMove(oDiv,300);
}
function startMove (dom ,target){
clearInterval(timer);
var iSpeed = target - dom.offsetLeft > 0 ? 7 :-7;
timer = setInterval(function(){
if (Math.abs(target - dom.offsetLeft) < (Math.abs(iSpeed)){
clearInterval(timer);
dom.style.left + target + 'px';
}else{
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
},30)
}
2.缓冲运动
<head>
<style>
/* 正向 */
div {
width:50px;
height:50px;
background:red;
position:absolute;
left:0px;
top:0px;
}
button{
margin-top:70px;
}
span{
position:absolute;
left:600px;
top:0px;
width:1px;
height:50px;
background:black;
}
</style>
</head>
<body>
<div></div>
<span></span>
<button id='btn'>run</button>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oBtn = document.getElementById('btn');
var timer = null;
oBtn.onclick = function(){
startMove(oDiv,600);
}
//物体的速度 距离目标点越近 就越小 当到达目标点时 速度减小为0
function startMove(dom,target){
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function(){
iSpeed = (target - oDiv.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(oDiv.offsetLeft == target){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
},30);
}
</script>
</body>
3.demo
隐藏菜单
<head>
<style>
.wrapper{
width:400px;
height:80px;
background:orange;
position:absolute;
left:-400px;
top:200px;
}
span{
width:50px;
height:80px;
background:red;
position:absolute;
right:-50px;
top:0px;
}
</style>
</head>
<body>
<!-- 隐藏菜单 冒泡事件 -->
<div class="wrapper">
<span></span>
</div>
<script>
var timer = null;
var oDiv = document.getElementsByClassName('wrapper')[0];
oDiv.onmouseenter = function(){
startMove(this,0);
}
oDiv.onmouseleave = function(){
startMove(this,-400);
}
function startMove(dom,target){
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function(){
iSpeed = (target - oDiv.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(oDiv.offsetLeft == target){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}
},30);
}
//在网页中查看比较方便
function getStyle (dom, attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom.currentStyle[attr];
}
}
</script>
</body>
4. 透明度缓冲运动
//将透明度做成缓冲 只有 0 和 1【同时扩大一百倍】
<head>
<style>
div{
width:100px;
height:100px;
background:red;
opacity:1;
}
</style>
</head>
<body>
<div id = 'demo'></div>
<script>
var timer = null;
var oDiv = document.getElementById('demo');
oDiv.onclick = function (){
startMove(this,50);
}
function getStyle (dom, attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom.currentStyle[attr];
}
}
//将透明度做成缓冲 只有 0 和 1【同时扩大一百倍】
function startMove(dom,target){
clearInterval(timer);
var iSpeed = null, iCur = null;
iCur = setInterval(function(){
iCur = parseFloat( getStyle(dom,'opacity') ) * 100;
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == target){
clearInterval(timer);
}else{
// [0,1] 区间的变化太小,以上扩大100倍 ,iCur * 100, iSpeed *100
dom.style.opacity = (iCur + iSpeed) / 100;
}
},30)
}
</script>
</head>
5.多个物体间运动
<head>
<style>
div{
width:100px;
height:100px;
background:red;
opacity:1;
margin-bottom:100px;
}
</style>
</head>
<body>
<!-- 类数组 -->
<div></div>
<div></div>
<div></div>
<div></div>
<script>
//定时器【同一个定时器会互相影响】【若不想影响,可以给每一个div都给一个定时器,在所有timer换成dom.timer】
var timer = null;
var oDivArray = document.getElementsByTagName('div');
for (var i = 0;i < oDivArray.length; i ++){
// 鼠标放上去时
oDivArray[i] .onmouseenter = function (){
startMove(this,400);
}
// 鼠标移出时
oDivArray[i].onmouseleave = function(){
startMove(this,100);
}
}
// 利用for循环,给每一个div都绑定事件
// oDiv.onclick = function(){
// startMove(this,50);
// }
function getStyle (dom, attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom.currentStyle[attr];
}
}
function startMove(dom, target){
clearInterval(dom.timer);
var iSpeed = null, iCur = null;
//iCur为当前宽度值
dom.timer = setInterval(function(){
iCur = parseInt(getStyle(dom,'width') );
//获得width,单位为px
//parseInt 使字符串转化成整数
iSpeed = (target - iCur) / 7;
// 当前速度是由当前宽度所决定的
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == target){
clearInterval(dom.timer);
// 清零
}else{
dom.style.width = iCur + iSpeed + 'px';
}
} , 30);
}
</script>
</body>
6.多物体的不同运动
<head>
<style>
div{
width:50px;
height:50px;
opacity:1;
margin-bottom:60px;
background-color:blueviolet;
border :5px solid burlywood;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
// 先清空定时器
var timer = null;
var oDivArray = document.getElementsByTagName('div');
//绑定事件[从第一个div分别写其改变的方法]
oDivArray[0].onclick = function (){
startMove(this, 'height', 400);
}
oDivArray[1].onclick = function (){
startMove(this, 'width', 400);
}
oDivArray[2].onclick = function (){
startMove(this, 'opacity', 50);
}
oDivArray[3].onclick = function (){
startMove(this, 'borderWidth', 40);
}
function getStyle (dom, attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom.currentStyle[attr];
}
}
//写startMove的函数,使得方法可以引用
// 可以将指定的属性传进来
function startMove(dom,attr ,target){
clearInterval(dom,timer);
var iSpeed = null ,iCur = null;
dom.timer = setInterval(function(){
if(attr == 'opacity'){
iCur = parseFloat(getStyle(dom,attr) ) *100;
}else{
iCur = parseInt(getStyle(dom,attr));
}
// target为目标点
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur == target){
clearInterval(dom.timer);
// 清零
}
if (attr == 'opacity'){
dom.style.opacity = (iCur + iSpeed )/100;
}else{
dom.style[attr] = iCur + iSpeed + 'px';
}
},30)
}
</script>
</body>
7.多物体多只运动+回调机制
<head>
<style>
div{
position:absolute;
left:0px;
width:100px;
height:100px;
opacity:1;
background-color:red;
}
#topDiv{
top:200px;
}
#bottomDiv{
top:400px
}
</style>
</head>
<body>
<!-- 同一个物体同时发生多个变化 -->
<div id="topDiv"></div>
<div id="bottomDiv"></div>
<script>
//width :100-->400 height:100-->400 left:0 -->200 top:200-->300 opacity :1-->0.5
//最好的传入方式
var oTopDiv = document.getElementById('topDiv');
var oBottomDiv = document.getElementById('bottomDiv');
oTopDiv.onclick = function () {
startMove(this, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
startMove(oBottomDiv, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
alert('over');
})
})
}
function getStyle(dom,attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom,currentStyle[attr];
}
}
//callback调回机制
function startMove (dom,attrObj,callback){
clearInterval(dom.timer);
var iSpeed = null, iCur = null;
dom.timer = setInterval(function(){
var bStop = true;
for(var attr in attrObj){
if(attr == 'opacity'){
iCur = parseFloat(getStyle(dom,attr)) *100;
}else{
iCur = parseInt(getStyle(dom,attr));
}
// target为目标点
iSpeed = (attrObj[attr] - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (attr == 'opacity'){
dom.style.opacity = (iCur + iSpeed )/100;
}else{
dom.style[attr] = iCur + iSpeed + 'px';
}
if(iCur != attrObj[attr]){
bStop = false;
}
}
if(bStop){
clearInterval(dom.timer);
typeof callback == 'function'&& callback();
// &&前的数为true时,才执行后面
}
},30)
}
</script>
</body>