js笔记---封装一般运动
2014-10-28 22:24
344 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div{ width:100px; height:100px; background-color:red; margin-top:20px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); //int i=0; //for(i=0;i<oDiv.length;i++){ //} oDiv[0].onmouseover=function(){ StarMove(this,300,'width'); } oDiv[0].onmouseout=function(){ StarMove(this,100,'width'); } oDiv[1].onmouseover=function(){ StarMove(this,150,'height'); } oDiv[1].onmouseout=function(){ StarMove(this,100,'height'); } } //获取兼容的对应属性值 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } function StarMove(obj,iTarget,attr){ clearInterval(obj.timer);//清掉对应的 对象的定时器 obj.timer=setInterval(function(){ var iCur=parseInt(getStyle(obj,attr)); var iSpeed=(iTarget-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur==iTarget){ clearInterval(obj.timer); } else{ obj.style[attr]=iCur+iSpeed+'px'; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
相关文章推荐
- 【js设计模式笔记---封装】
- JS学习笔记-OO疑问之封装
- 【学习】js学习笔记:对象的遍历和封装特性
- js课程笔记(四)cookie,物体运动(规律公式推导待续)
- JS完美运动框架的封装过程
- JS OO 学习笔记 ——JS封装使用prototype添加方法
- js学习笔记20----addClass,removeClass函数封装
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 原生js封装元素运动函数
- 用原生js封装运动框架
- js笔记---封装自己的Ajax方法
- 【原生js】js面向对象三大特征之封装笔记
- 智能社JavaScript学习笔记——JS运动基础
- 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
- 韩顺平 javascript教学视频_学习笔记19_js面向对象三大特征(封装,继承,多态)
- 简单的JS运动封装实例---侧栏分享到
- js笔记---(运动)通用的move方法,兼容透明度变化
- js中封装多物体运动及透明度变化函数
- 封装js运动函数
- 【js设计模式笔记---封装】