JavaScript学习笔记2--DOM、运动

日期：2023-09-22 22:54

1、DOM

创建跟插入示例：

oUl.appendChild（oLi）是先将oLi从原来的父级删除，然后再插入oUl.





无标题文档

删除示例：





无标题文档


示例1删除
示例2删除
示例3删除
示例4删除
示例5删除
示例6删除
示例7删除
示例8删除

2、获取table表格内容

oTable.tBodies[0].rows[0].cells[0].innerHTML

3、运动

3.1匀速运动





无标题文档

3.2分享侧边栏





无标题文档



分享到

3.3淡入淡出





无标题文档

3.4缓冲运动





无标题文档

3.5右下角悬浮框





无标题文档

3.6对联悬浮框





无标题文档

3.7匀速运动停止

如果速度无法被运动距离整除，则无法精确运动到目标，下面是解决方法：





无标题文档

3.8多个物体同时运动（例子：div变宽）

为每个div设定一个定时器





无标题文档

3.9多物体淡入淡出

定时器作为物体的属性，所有东西不能公用。





无标题文档

3.10变宽和变高





无标题文档



变高
变宽

3.11运动框架及使用实例

单一运动框架：只能一个运动结束后才能进行下一个运动

// JavaScript Document
function getStyle(obj, name)
{if(obj.currentStyle){return obj.currentStyle[name];	}	else{return getComputedStyle(obj, false)[name];	}
}//参数分别是：操作对象，参数，参数值，操作结束后执行函数
function startMove(obj, attr, iTarget, fnEnd)
{clearInterval(obj.timer);obj.timer=setInterval(function(){//代替offset，采用offset的时候，加上边框会出现bugvar cur=0;if(attr=='opacity'){//Math.round();四舍五入cur=Math.round(parseFloat(getStyle(obj, attr))*100);}else{cur=parseInt(getStyle(obj, attr));}var speed=(iTarget-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cur==iTarget){clearInterval(obj.timer);	if(fnEnd())fnEnd();}else{if(attr=='opacity'){obj.style.filter='alpha(opacity:'+cur+speed+')';obj.style.opacity=(cur+speed)/100;}else{www.introzo.com[attr]=cur+speed+'px';}}},30);
}

使用实例





无标题文档

完美运动框架：可以同时进行多个运动，也可以分步骤进行运动

// JavaScript Document
function getStyle(obj, name)
{if(obj.currentStyle){return obj.currentStyle[name];	}	else{return getComputedStyle(obj, false)[name];	}
}//参数分别是：操作对象，json参数和参数值，操作结束后执行函数
//startMove(oDiv, {width:400, height:400});
function startMove(obj, json, fnEnd)
{clearInterval(obj.timer);obj.timer=setInterval(function(){var bStop=true;	//假设所有值已经到了目标值for(var attr in json){//代替offset，采用offset的时候，加上边框会出现bugvar cur=0;if(attr=='opacity'){//Math.round();四舍五入cur=Math.round(parseFloat(getStyle(obj, attr))*100);}else{cur=parseInt(getStyle(obj, attr));}var speed=(json[attr]-cur)/6;speed=speed>0?Math.ceil(speed):Math.floor(speed);//如果当前属性值还没到目标值，则表示还有属性值需要进行运动if(cur!=json[attr])bStop=false;if(attr=='opacity'){obj.style.filter='alpha(opacity:'+cur+speed+')';obj.style.opacity=(cur+speed)/100;}else{www.introzo.com[attr]=cur+speed+'px';}}if(bStop){clearInterval(obj.timer);	if(fnEnd)fnEnd();}},30);
}

使用实例





无标题文档

最近发表

猜你喜欢

JavaScript学习笔记2--DOM、运动

相关文章