-
上面的那个问题，解决方法。第一个，设置行内样式。查看全部
-
最初没有border，style.width=offsetWidth - 1 + 'px'； 加了border值后，offsetWidth每次算的时候就会加上border，所以，如果border大于1， 那么style.width不但不会减小，还会增加。查看全部
-
//获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(0bj,false)[attr];s } }查看全部
-
6-2：完美运动框架 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式 var json={name:key}多对值可以用逗号隔开 var json={a:12,b:2} 遍历json,用 for-in循环 for(var i in json) {alert(i);//弹出对象 alert(json[i]);//弹出对象的值} 使用案例： window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,{width:400,height:101,opacity:100}) }} function startMove(obj,json,fn){ var flag=true;标志是否全部运动到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ 遍历JSON for( var attr in json){ var curr=0; if(attr=='opacity'){ //Math.round四舍五入 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; } 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)}查看全部
-
5-1：链式运动 链式运动的环环紧扣 <script> window.onload=function(){ var Li=document.getElementById('li1'); Li.onmouseover=function(){ startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100) }) }); } Li.onmouseout=function(){ startMove(Li,'opacity',30,function(){ startMove(Li,'height',100,function(){ startMove(Li,'width',200) }) }) } } </script>查看全部
-
Math.round()将一个数四舍五入为一个最接近的整数 改变透明度时出现的问题： 1、获取当前透明度不用parseInt，parseInt是整形，透明度以小数为主，可以用parseFloat(). 2、设置透明度要考虑兼容 obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')'; obj.style.opacity=(当前透明度+变化速度)/100;查看全部
-
4-3任意属性值： 功能完全相同的代码，可以将不同的东西当做参数传进去。 obj.style.width=curr+speed+'px'; // 这样写，有利于整理代码，可以将其作为参数传入，下面一条将其作为参数attr // 传进来，就可以实现不同样式的运动 // obj.style['height']=curr+speed+'px'; obj.style[attr]=curr+speed+'px';查看全部
-
4-2获取样式： <script> window.onload=function(){ startMove(); }; function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); // offsetWidth获取的是它整个的宽度：包括内容宽度和边框等等 // oDiv.style.width=oDiv.offsetWidth-1+'px'; // 当把样式写在行内时，可以通过如下方法获取 // oDiv.style.width=parseInt(oDiv.style.width)-1+'px'; // 当不把样式写在行内是，可以通过getStyle函数获取 oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; oDiv.style.fontSize=parseInt(getStyle(oDiv,'font-size'))-1+'px'; },30) } // getStyle函数是一个封装好的用来获取样式的函数 function getStyle(obj,attr){ // currentStyle:针对IE浏览器 if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ // getComputedStyle:针对Firefox浏览器 return getComputedStyle(obj,false)[attr]; } } <!--<div id="div1" >--> <div id="div1">干酪 </div>查看全部
-
4-1多物体动画： // var timer=null; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; speed=(iTarget-obj.offsetWidth)/10; speed=speed>0? Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); } else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } // var alpha=30; function startMove1(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10;} else{speed=10;} if(obj.alpha==iTarget) { clearInterval(obj.timer); } else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script>查看全部
-
4-1多物体动画： 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <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); } } };查看全部
-
3-1：缓冲动画 alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 </style> <script type="text/javascript"> window.onload = function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-200); } }; var timer=null; // 从用两个函数实现，到用一个函数：两个有很多相同的部分，则相同部分可以共用，不同部分看有什么联系 // 从传入两个参数到一个参数：参数传递尽可能的少 function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetLeft)/20; speed=speed>0? Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } else {查看全部
-
2-2 ：透明动画 所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50) 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.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } },30) }查看全部
-
JS动画效果： 2-1：速度动画： 为防止动画累加，在每次触发动画事件时，应该先清除前一个没有完成的动画，即清除钱一池开启的定时器，然后这次再开启一个定时器。 offsetLeft值可以获取当前的left值， 而offsetLeft属性不能被赋值，只能获取 window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
用此方法不用将样式都写到html里查看全部
-
JS动画效果： 运动框架实现思路： 1.速度（改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
举报
0/150
提交
取消