要实现的效果如下:
鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~
(且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~
----------------------------------------------------js代码如下 -----------------------------------------------------
//执行函数
window.onload = function(){
//声明控制变量
var aDiv = document.getElementsByTagName('div');
//遍历
for(var i=0;i<aDiv.length;i++){
//添加自定义属性
aDiv[i].timer = null;
//添加事件(由于每个具体事件是不同的,所以单独来控制)
aDiv[0].onmouseover = function(){
moveStart(this,'width',400);
}
aDiv[0].onmouseout = function(){
moveStart(this,'width',200);
}
aDiv[1].onmouseover = function(){
moveStart(this,'height',400);
}
aDiv[1].onmouseout = function(){
moveStart(this,'height',200);
}
aDiv[2].onmouseover = function(){
moveStart(this,'opacity',100);
}
aDiv[2].onmouseout = function(){
moveStart(this,'opacity',30);
}
}
}
//getStyle 获取对象的全局style属性
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle;
}
else{
return getComputedStyle(obj,false)[name];
}
}
//moveStart 运动函数
function moveStart(obj,attribute,iTarget){
//多个物体运动框架
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//声明
var current = 0;
if(attribute == 'opacity'){
current = parseFloat(getStyle(obj,attribute))*100;
}
else{
current = parseInt(getStyle(obj,attribute));
}
//缓冲速度
var speed = (iTarget - current )/4;
//上下取整
speed = speed>0? Math.ceil(speed):Math.floor(speed);
//静
if(iTarget == current){
clearInterval(obj.timer);
}
else{
if(attribute == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
obj.style.opacity = (current + speed)/100;
}
else{
obj.style[attribute] = current+speed+'px';
}
}
},30);
}
---------------------------------------------------------------------------------
js的学习也有大半月了,进度还是很缓慢~~ 慢慢来了,还是基本功,编程基础不扎实, 慢慢来了~~
在原有学习计划上, 减少点打酱油时间, 多点看书事件,把js基础先补补~~