-
@链式运动（下） 恢复状态（over--out）：以动画的最后状态的从里到外依次恢复直到原状态。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@链式运动（上） 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
1、动画过渡效果与time和speed有关。 2、Math.round(number);//四舍五入，应用场景：opacity etc. 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@获取样式 1、过程：obj.stlye.width是样式中的块width；而obj.offsetWidth（offsetxxx的bug）是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度； 2、用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用（IE）currentStyle和（火狐）getComputedStyle获取css的非行间样式（效果等价于刚刚用style.xxx获取的效果）； 3、var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null）。 4、在用到obj.offsetWidth或者obj.offsetHeight的时候，如果，obj对象的样式有border等属性，则需要用getStyle()函数解决实际width和height值样式不兼容的问题。 //获取style样式（关键代码） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } 5、obj.style[attr]=icur+speed+'px';（推荐使用，因为style.attr不支持变量连接符） 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@多物体运动（下） 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@多物体运动（上） Ps1：if..else..中可以改写成三目运算（?:）。 Ps2：var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer。 aLi[i].timer=null; ... Ps3：提示：多物体运动，若要设置某个属性动画，该属性不能设置全局公用，要obj.属性来操作。多物体运动时，不能共用同一个定时器或同一个变量，会造成争抢导致错误。应该给每个物体单独定义定时器及变量，调用函数时设置当前物体的定时器和变量。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：opacity：所有浏览器都支持 opacity 属性。 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 Ps3：动画大致模版（思路）： <script type="text/javascript"> var timer=null; function startMove (iTarget) { clearInterval(timer); var obj=document.getElementById('obj'); timer=setInterval(function () { var speed=0; if(obj.属性>iTarget){ spped=-num; } else{ speed=num; } if(obj.属性==iTarget){ clearInterval(timer); } else{ obj...=obj.属性+speed... } }, 毫秒) } </script> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
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>查看全部
-
//之前老师的代码有一个小bug，解决后的代码 function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(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.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }查看全部
-
@运动框架实现思路 若函数功能相近，则尽量合并（不一样的地方进行传参，以及尽量减少参数）。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
这里多物体运动需要注意一下不能直接用this，不然第二个会失败，function（）{}里面的function(){}中this的指向的不是box[i]了，所以要在第一个function里面加一个var g=this； window.onload=function(){ var boxs=document.getElementsByTagName('div'); for(var i=0;i<boxs.length;i++){ boxs[i].timer=null; boxs[i].onmouseover=function(){ var g=this; startmove(g,'opacity',1,function(){ startmove(g,'width',400) }) }; boxs[i].onmouseout=function(){ var g=this startmove(g,'width',200,function(){ startmove(g,'opacity',0.3) }) } ; } };查看全部
-
运动框架实现思路 1.速度（改变值left、right、width、height、opacity(透明度)） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
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>查看全部
-
JS动画案例 <script src="js/move.js"></script> <script> window.onload=function(){ var oMain=document.getElementById('main'); oLis=oMain.getElementsByTagName('a'); for(var i=0;i<oLis.length;i++){ oLis[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0];//这里得使用this,在鼠标运动中只能使用this，内函数无法识别oLis[i] startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}); }); } } } </script> <body> <div id="main"> <a href="#"><i><img src="..."/></i><p>...</p></a> ...... <a href="#"><i><img src="..."/></i><p>...</p></a> </div> </body> ps：把onmouseover改成onmouseenter或者阻止事件onmouseover的冒泡查看全部
-
//最终封装的“完美运动框架” function startMove(obj,json,fn){ var flag;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ flag=true; //进入定时器时,将flag设置为所有的属性都已达到目标值 for(var attr in json){ //取属性值 var curr=0; if(attr=='opacity'){//判断是否为透明度 curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr!=json[attr]){ flag=false; //假设有三个json的key/value值,这三个值中只要有一个没有达到目标值,flag就等于false。 } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(curr+speed)+')'; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }查看全部
举报
0/150
提交
取消