1、匀速运动
解决速度 ： target-obj.offsetLeft > 0 ? 正速度 : 负速度
透明度操作：定义一个变量，并把数值扩大到100倍（步长除外），最终的数值缩小100倍
匀速运动
function startMove(target){
clearInterval( timer );
timer = setInterval( function(){
var speed = target - oDiv.offsetLeft>0 ? 5 : -5;
if( oDiv.offsetLeft === target ){
clearInterval( timer );
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
(当目标值除不尽步长时的停止条件)
if( Math.abs( target - oDiv.offsetLeft ) < 7 ){
oDiv.style.left = target + "px";
clearInterval( timer );
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
},30 )
}
匀速运动透明度
var alpha = 30; 定义一个变量操作透明度的变化
obj.onmouseover = function(){
startMove(100);
}
obj.onmouseout = function(){
startMove(30);
}
var timer = null;
function startMove(target){
clearInterval( timer );
timer = setInterval( function(){
var speed = target-alpha>0 ? 1 : -1;
if( target == alpha ){
clearInterval( timer );
}else{
alpha += speed;
obj.style.opacity = alpha/100;
}
},30 )
}
2、缓冲运动
问题 ： 达不到目标值
var speed = (target-obj.offsetLeft)/8
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
代码
function startMove(target){
clearInterval( timer );
timer = setInterval( function(){
缓冲运动原理
var speed = (target - oDiv.offsetLeft)/10;
数据丢失 导致永远达不到目标值 为了保证数据不丢失 正数 向上取整 负数向下取整
var speed = speed>0 ? Math.ceil( speed ) : Math.floor(speed);
if( oDiv.offsetLeft === target ){
clearInterval( timer );
}else{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
console.log( "speed="+speed );
console.log( "offsetLeft="+oDiv.offsetLeft );
},30 )
}
3、多物体运动
问题 ： 多个物体共用同一个定时器 效果冲突
解决 ： 定时器独立
利用对象的特性 为每一个运动的对象添加一个定时器属性
透明度操作：把变量定义在for循环中（定义一个变量，并把数值扩大到100倍（步长除外），最终的数值缩小100倍）
代码
for( var i = 0 ; i < divs.length ; i++ ){
divs[i].alpha = 30;定义操作透明度的变量
divs[i].onmouseover = function(){
startMove(this,100);
}
divs[i].onmouseout = function(){
startMove(this,30);
}
}
function startMove(obj,target){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
var speed = (target-obj.offsetWidth)/10;
var speed = target-obj.alpha > 0 ? 1 : -1;透明度步长
透明度操作
if( obj.alpha == target ){
clearInterval( obj.timer );
}else{
obj.alpha += speed;
obj.style.opacity = obj.alpha/100;
}
speed = speed>0?Math.ceil(speed) : Math.floor(speed);
if( obj.offsetWidth == target ){
clearInterval( obj.timer );
}else{
obj.style.width = obj.offsetWidth+speed + "px";
}
},30 )
}
4、获取非行内元素样式值
封装一个函数 获取非行内元素样式值
function getStyle(obj,attr){
if( window.getComputedStyle ){
return window.getComputedStyle( obj )[attr];
}else{
return obj.currentStyle[attr];
}
}
匀速开始----缓冲----多物体
function startMove(obj,target,attr){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
if(attr=="opacity"){
var current = getStyle(obj,attr)*100
}else{
var current = parseInt( getStyle(obj,attr) )
}
var speed = ( target - current )/8;
speed = speed > 0 ? Math.ceil( speed ):Math.floor( speed );
if( target == current ){
clearInterval( obj.timer );
}else{
if( attr == "opacity" ){
obj.style[attr]= ( current + speed ) / 100
}else{
obj.style[attr]= current + speed + "px"
}
}
},30 )
}
//获取实际样式值 （非行内元素）
function getStyle(obj,attr){
}
链式运动
上一个动作完成 进入到下一个动
解决 ： 在函数的参数上加一个回调函数 上一个动作完成后，就会调用这个回调函数
完美运动
同一时间内 操作多个属性和目标值 ， 使用json对象存储这多个属性和目标值 通过在定时器中遍历json 达到同时操作多个属性和目标值效果