-
速度动画查看全部
-
链式运动：先完成一个动作，再完成另外一个动作； opacity:透明度查看全部
-
getStyle函数编写 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//注意此处必须有obj }else{ return getComputedStyle(obj,false)[attr];//注意此处不能有obj } }查看全部
-
Math.floor()向下取整 Math.ceil()向上取整查看全部
-
JS中 obj.style.attr 只能获取行内样式 要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取 可以封装为function getStyle(obj,attr){ if(obj.currentStyle){return obj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr]}} obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值查看全部
-
jQuery动画案例 通过改变setInterval()的时间值，改变动画的快和慢 jq方法实现动画效果： <script src="js/move.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ //300表示速度，以毫秒为单位，也可用非数值的"slow"、"fast"等表示 $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script> <body> <div id="move"> <a href="#"><i><img src="..."/></i><p>...</p></a> ...... <a href="#"><i><img src="..."/></i><p>...</p></a> </div> </body>查看全部
-
当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样BUG就都解决了查看全部
-
Math.round()，四舍五入 设置透明度： 对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity: 0.3;查看全部
-
照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。 结论：flag要定义在定期器内查看全部
-
完美框架 //同时运动框架 function startMove(obj,json,fn){ clearInterval(obj.timer);//清除定时器，避免重复生成多个定时器 obj.timer=setInterval(function(){ var flag=true;//假设刚开始时所有运动都已完成 for (var attr in json) {//遍历json var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]){ flag=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } if (flag) {//当所有运动都完成时，清除定时器 clearInterval(obj.timer); if(fn){ fn(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
<script src="startMove.js"></script> <script type="text/javascript"> window.onload=function(){ var l1=document.getElementById('li'); l1.onmouseover=function(){ startMove(l1,'width',600,function(){ startMove(l1,'height',400,function(){ startMove(l1,'opacity',100); }); }); }; l1.onmouseout=function(){ startMove(l1,'opacity',30,function(){ startMove(l1,'height',100,function(){ startMove(l1,'width',200); }); }); }; }; </script>查看全部
-
这样写看似同时运动，但是会遇到覆盖前者和清除前者动画的冲突。 Ps：JS中，形参个数大于等于实参。Java SE中必须要等于。 让物体同时运动需要用到 json查看全部
-
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
Ps1：/*JSON格式：*/ var json={a:0};//键值对{name:key} var json={a:0,b:1};//键值对{name1:key1,name2:key2}，多对 Ps2：/*for-in（for-each）*/ for(var i in json){ alert(i);//name值 alert(json[i]);//key值查看全部
-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。查看全部
举报
0/150
提交
取消