zoukankan      html  css  js  c++  java
  • js笔记---封装一般运动

    <!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{ 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>

      

  • 相关阅读:
    html5学习笔记2——新元素
    html5学习笔记——基础
    html学习笔记之2——多媒体
    Python调试打印错误信息
    Python随机字符串验证码
    js传递数组
    js上传图片并预览
    JS获取当前日期、比较日期大小
    nrm管理npm源
    使用Git Subtree在多个项目中共用同一个子项目
  • 原文地址:https://www.cnblogs.com/juexin/p/4058147.html
Copyright © 2011-2022 走看看