js入门学习~ 运动应用小例

标签：

要实现的效果如下：

鼠标移入各个小方块，实现对应的效果（变宽，变高，移入透明，移出恢复）~~

（且各运动相互之前不干扰）  主要是练习多个物体的运动框架~~        

----------------------------------------------------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基础先补补~~   

js入门学习~ 运动应用小例

标签：

原文地址：http://www.cnblogs.com/fuyinsheng/p/5057800.html