-
JS动画效果: 运动框架实现思路: 1.速度(改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
基础jQeury: $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"200px",opacity:0},300,function(){ $(this).css({top:-200}); $(this).animate({top:"0px",opacity:100},200); }); }); });查看全部
-
不同值的地方作为参数来传入查看全部
-
(打码总结)floor向下取整ceil向上取整查看全部
-
(打码总结)当两段代码很相似的时候把不同的地方提取出来作为参数传进去查看全部
-
运动框架实现思路查看全部
-
json查看全部
-
IE&火狐区别对待查看全部
-
传递的参数不一样,封装方式不同,比如透明度opacity是小数,也没有单位px,此外,Math.round是对取出的数值四舍五入。查看全部
-
obj.style.width可以写为:obj.style['width'],如此,style的属性,就可以作为参数传递。查看全部
-
速度设置查看全部
-
width和border边框都写在css样式里面,obj.offsetWidth则是width和border的宽度,而不只是width的宽度,解决:<br> (1)width写在HTML行间 (2)利用函数:IE:currentStyle;非IE:getComputedStyle function getStyle(obj,attr){ //获取样式,attr:属性,如width if(obj.currentStyle){ return currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
多物体运动时: (1)不能共用一个定时器,快速移动时出错,可以分别定义:如aLi[i].timer=null,再传参数(obj,iTarget),则定时器是obj.timer; 传事件参数时,传this(当前正在执行的)给obj,而不是aLi[i] (2)同理,透明度运动时所有的参数也不能共用,包括定时器Timer与alpha值查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取样式</title> <style type="text/css"> #div1{ height: 200px; background: #f00; border:4px solid #0000FF } </style> </head> <body> <div id="div1" ></div> </body> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var div1=document.getElementById("div1"); //div1.style.width=div1.offsetWidth-1+"px"; //div1.style.width=parseInt(div1.style.width)-1+"px"; div1.style.width=parseInt(getStyle(div1,"width"))-1+"px"; },30); } //一封装好的函数。可以改变宽度,高度,字号。。。的大小。获取样式的封装函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对ie浏览器。 }else{ return getComputedStyle(obj,false)[attr];//针对firefox浏览器。 } } </script> </html> <!-- -->查看全部
-
运动框架实现思路查看全部
举报
0/150
提交
取消