-
6-2 完美运动框架 同时运动 .利用JSON来实现同时运动 ..解析 for(var i in Json){ Json[i] } .{attr1:itarget1,att2:itarget2} .设置标志flag来标识是否所有运动执行完毕 if(iCur != json[attr]) flag = false; if(flag)clearInterval(obj.timer) if(fn) fn(); JSON（利用其完成同时运动） json={name:key,name:key....}可以在一个括号内加入多对值 利用for in 遍历 ：for(var i in JSON) i表示name,JSON[i]标示key(值) 可以将其理解为（属性:值）的组合查看全部
-
S动画效果： 2-1：速度动画： 为防止动画累加，在每次触发动画事件时，应该先清除前一个没有完成的动画，即清除钱一池开启的定时器，然后这次再开启一个定时器。 offsetLeft值可以获取当前的left值， 而offsetLeft属性不能被赋值，只能获取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
框架最终 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag = true; for(var attr in json){ //取当前值 var icur =0; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr)*100)); }else{ icur = parseInt(getStyle(obj,attr)); } //计算速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //检测停止 if(icur != json[attr]) { flag = false; } if(attr=='opacity') { obj.style.opacity = (icur+speed)/100; obj.style.filter = 'alpha(opacity='+(icur+speed)+')'; }else{ obj.style[attr] = icur+speed+"px"; } } if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }查看全部
-
offset*再添加border等属性会出现bug查看全部
-
ie--->currentStyle[attr] getcomputedStyle(obj,false)[attr]查看全部
-
多物体不能共用查看全部
-
透明度设置 filter:alpha(opacity:30)===>ie opacity:0.3===>其他浏览器查看全部
-
filter:alpha(opacity:30);//针对IE opacity:0.3;//firefox和chrome查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对IE }else{ return getComputedStyle(obj,false)[attr];//针对firefox } }查看全部
-
6-1 同时运动 用到json查看全部
-
5-1 链式动画 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height',400,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'height',200,function(){ startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'width',200) }) }); }; }; window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.timer = null; oDiv.onmouseover = function(){ startMove(oDiv,'width',400,function(){ startMove(oDiv,'height',400,function(){ startMove(oDiv,'opacity',100); }); }); }; oDiv.onmouseout = function(){ startMove(oDiv,'height',200,function(){ startMove(oDiv,'opacity',30,function(){ startMove(oDiv,'width',200) }) }); }; };查看全部
-
4-4 任意属性值（二） 在使用parseInt()时处理透明度小数时,会有影响 单位设置 相应位置进行判断 IE/FireFox 取相应值 Math.round()四舍五入取整数值 Math.round(parseFloat(getStyle(obj,attr))*100) parseInt(string, radix) parseInt() 函数可解析一个字符串，并返回一个整数。 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。 当忽略参数 radix , JavaScript 默认数字的基数如下: 如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。 如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。 如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。 getComputerStyle()方法返回一个CSS Style Declaration对象 Math.round()将一个数四舍五入为一个最接近的整数查看全部
-
4-3 任意属性值（一） 功能完全相同的代码，可以将不同的东西当做参数传进去。 obj.style.width=curr+speed+'px'; // 这样写，有利于整理代码，可以将其作为参数传入，下面一条将其作为参数attr // 传进来，就可以实现不同样式的运动 // obj.style['height']=curr+speed+'px'; obj.style[attr]=curr+speed+'px';查看全部
-
<script> window.onload=function(){ startMove(); }; function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); // offsetWidth获取的是它整个的宽度：包括内容宽度和边框等等 // oDiv.style.width=oDiv.offsetWidth-1+'px'; // 当把样式写在行内时，可以通过如下方法获取 // oDiv.style.width=parseInt(oDiv.style.width)-1+'px'; // 当不把样式写在行内是，可以通过getStyle函数获取 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; oDiv.style.fontSize=parseInt(getStyle(oDiv,'font-size'))-1+'px'; },30) } // getStyle函数是一个封装好的用来获取样式的函数 function getStyle(obj,attr){ // currentStyle:针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ // getComputedStyle:针对Firefox浏览器 return getComputedStyle(obj,false)[attr]; } } <!--<div id="div1" >--> <div id="div1">干酪 </div>查看全部
-
4-2 获取样式 . DOM元素.style.width 在元素上加上边框时offsetWidth是整个元素的宽度(包括边框 padding等) . 利用行内样式Dom元素.style.width parseInt()取整 . currentStyle[attr] (IE)针对Ie浏览器 getComputedStyle(obj,false)[attr] (firefox)针对firefox浏览器 function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];} else{return getComputedStyle(obj,false)[attr];} }查看全部
举报
0/150
提交
取消