-
//变速运动 s1：opacity：所有浏览器都支持 opacity 属性。<br> 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。<br> <br> Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 Math.floor();向下取整 Math.ceil();向上取整 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。 【凡是遇到速度的，都应该考虑是否要向上或向下取整】 var timer1=null; function starMove(iTarget){ var oDiv1=document.getElementById('div1'); clearInterval(timer1);//清除定时器 timer1=setInterval(function(){ var speed = (iTarget-oDiv.offsetLeft)/20; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv1.offsetLeft==iTarget){//offsetLeft:为当前div偏移值 clearInterval(timer1); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; } },30); 【bug】最右边是-8.55px而不是0，最左边是-199.5而不是-200 解决方法：向下取整floor或向上取整ceil查看全部
-
将鼠标移开时图片返回原值： var oDiv = document.getElementById("div1"); oDiv.onmouseout = function(){ //当鼠标移出时执行以下函数 startMove(); } var timer = null; function startMove(){ /*clearInterval(timer); //这一步就是将所有定时器关闭，使图片始终以设置的像素匀速移出*/ var oDiv = document.getElementById('div1'); timer = setInterval(function(){ //设置一个定时器 if (oDiv.offsetLeft == -200px){ //判断是否可以停止运动的条件 clearInterval(timer); //达到条件就将定时器任务停止 } else { oDiv.style.left = oDiv.offsetLeft - 10 + 'px'; //设置每毫秒向左平移-10px即向右平移10px } }， 30) }查看全部
-
将鼠标滑过图片移出： var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ //当鼠标滑过是执行以下函数 startMove(); } var timer = null; function startMove(){ /*clearInterval(timer); //这一步就是将所有定时器关闭，使图片始终以设置的像素匀速移出*/ var oDiv = document.getElementById('div1'); timer = setInterval(function(){ //设置一个定时器 if (oDiv.offsetLeft == 0){ //判断是否可以停止运动的条件 clearInterval(timer); //达到条件就将定时器任务停止 } else { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; //设置每毫秒向左平移10px } }， 30) }查看全部
-
JS链式动画查看全部
-
http://note.youdao.com/noteshare?id=4bb95271fbcc3d8870736411f121d04e查看全部
-
http://note.youdao.com/noteshare?id=06e4dd2d8c0eb5906b04c4b36bbf8130查看全部
-
<script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('img').animate({top:'-15px',opacity:'0'},300,function(){ $(this).css({top:'30px'}); $(this).animate({top:'15px',opacity:'1'},200) }) }) }) </script>查看全部
-
<script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-15,opacity:0},function(){//注意top后面不要带px _this.style.top=25+'px';//为了图标回来的时候是从下面回来.这里必须用+来连接字符串 move(_this,{top:15,opacity:100}) }) } } } // 由于onmouseover事件冒泡，所以当鼠标在a标签内不断移动（不出a标签的范围）会不断碰到a标签内的子元素，事件再冒泡到a,使得不断出发a.onmouseover事件，结果就是里面的小图片不停地动，改成onmuseenter,这个事件不冒泡或者写代码取消onmouseover的冒泡。 </script>查看全部
-
有速度变化的时候要添加Math.floor()，Math.ceil()这种向下或者向上去整，以免出现小数点导致问题查看全部
-
完美框架 //同时运动框架 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]; } }查看全部
-
链式动画，在startMove(obj,attr,iTarget,fn)再加一个fn参数，并在清除动画之后，加入fn方法：if(fn){fn();} 在主页中，在三个参数之后再加入一个参数 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) }) 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]; } }查看全部
-
1、获取当前透明度不用parseInt<br> 2、设置透明度要考虑兼容<br> obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')';<br> obj.style.opacity=(当前透明度+变化速度)/100;<br>针对chrome和火狐浏览器 3、透明度不加“px”<br> 在使用parseInt()时处理透明度小数时,会有影响 单位设置<br> 相应位置进行判断 IE/FireFox<br> 取相应值 Math.round()四舍五入取整数值<br> Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
【getStyle】如果页面不仅仅有宽和高，而是有好多别的样式，那么前面学的offsetLeft之类的都应该换成getStyle function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 使用方法为parseInt(getStyle(oDiv,"width")) 【封装函数】有的需要改变宽，有的需要改变高obj.style.width也可以写成obj.style['width'] function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var icur = parseInt(getStyle(obj,attr)); var speed = (iTarget-icur)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(icur == iTarget){ clearInterval(obj.timer); }else{ obj.style[attr] = icur + speed + "px"; } },30) } 调用方式如startMove(this,"height",400);查看全部
-
【前面学的offsetLeft之类的都应该改用getStyle】 在上一节的多个物体宽度变化的时候，如果给矩形添加一个外边框 border:4px solid #000 会发现，变宽之后的宽为392px，变回来之后是256px，与预期的400px和200px不符 原因：用oDiv.offsetWidth获取到的是包括边框在内的宽度 【解决方法1】把原来的样式#div1{width:200px;....}中的width去掉， 写在行间<div id="div1" > 所以，使用的时候:oDiv.style.width = oDiv.offsetWidth-1+"px"; 改成oDiv.style.width = parseInt(oDiv.style.width)-1+"px"; 【解决方法2】如果不想写在行内，也可以保留#div1{width:200px;....}采用函数： function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 所以oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; PS:这个函数除了可以改变宽度之外，还可以改变font-size等查看全部
-
【多个物体的宽度变化】 var aLi = document.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } var timer = null; function startMove(obj,iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed>0 ? Math.ceil(speed) :Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + "px"; } },30) } 【bug】如果鼠标移动得够快，会出现3个矩形同时变宽。 原因：虽然每次一上来就clearInterval(timer)，但是这个定时器是公用的，所以3个li同时在争着使用定时器 解决方法：给每一个li定义一个timer aLi[i].timer = null; 然后把需要timer的地方全部改成obj.timer查看全部
举报
0/150
提交
取消