-
offsetLeft当前位置的值查看全部
-
运动框架的实现思路查看全部
-
JSON是一种轻量级的数据交换格式 var json={name:key}多对值可以用逗号隔开var json={a:12,b:2} 遍历json,用 for-in循环查看全部
-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
透明度： css定义（filter:alpha(opacity:30)） JS 改变： IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100） <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body,div{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload = function(){ var oDiv =document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(100); } oDiv.onmouseout=function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv =document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed = 0; if(alpha>iTarget){ speed = -10; } else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer) } else{ alpha+=speed; oDiv.style.opacity = alpha/100 } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>查看全部
-
alert(0.07*100)会出现神奇的效果!查看全部
-
1、基础动画实现原理：利用定时器循环改变元素的样式属性。 2、clientWidth=padding+内容width。 offsetWidth=border+padding+内容width。 3、获取当前元素样式 IE currentStyle, firefox getComputedStyle查看全部
-
多物体的事件，慎重公用的属性。查看全部
-
function startMove(obj,json,fn) { var flag = true; clearInterval(obj.timer); obj.timer = setInterval(function() { for (var attr in json) { var current = 0; if (attr == "opacity") { current = Math.round(parseFloat(getStyle(obj,attr))*100); } else { current = parseInt(getStyle(obj,attr)); } var speed = (json[attr] - current)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (current != json[attr]) { flag = false; } else { flag = true; //这里需要判断 } if (attr == "opacity") { obj.style.filter = "alpha(opacity:" + (current + speed) +")"; obj.style.opacity = (current + speed)/100; } else { obj.style[attr] = current + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } },30); }查看全部
-
speed = (speed>0)?Math.ceil(speed):Math.floor(speed); 在speed位于区间(0,1)时，ceil值为1，而floor值为0,为了蹭到iTarget处，就不能让speed值为0； 在speed位于区间(-1,0)时，floor值为-1，而ceil值为0,为了蹭到iTarget处，就不能让speed值为0；查看全部
-
js动画运动框架与思路查看全部
-
运动框架思路参考查看全部
-
链式动画，在startMove(obj,attr,iTarget,fn)再加一个fn参数，并在清除动画之后，加入fn方法：if(fn){fn();} 在主页中，在三个参数之后再加入一个参数 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })查看全部
-
Math.round()，四舍五入 设置透明度： 对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity: 0.3; startMove(this,'opacity',100),this指代这个Li1,opacity是参数，也可以是width或者height,100为目标值，透明度的目标值。 Li1.onmouseover=function(){ startMove(this,'opacity',100); } 用getStyle这个方法去获取样式比用setoffWidth,更加准备，getStyle(obj,'width');是获取属性值，setoffWidth是获取整个盒子的值。（加边框） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
获取样式 currentStyle[attr] (IE) getComputedStyle(obj,false)[attr] (firefox)查看全部
举报
0/150
提交
取消