-
function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ 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; } 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){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity: 0.3查看全部
-
缓冲运动（减速）： 速度不是定值，而定义为speed=(target(目标值)-offsetLeft(当前值))/系数； 注意：这时候速度可能不是整数，故平移的的时候可能不能达到整的目标值，有多余或不足 解决方法：用数学方法取整，math.floor()向上取整；math.ceil()向下取整查看全部
-
css定义透明度 IE:（filter:alpha(opacity:30)）<br> 非IE:opacity:0.3 JS 改变：<br> IE：element.style.filter=‘alpha(opactiy:’+值+')'<br> 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）查看全部
-
运动实现的思路: 速度：left,right,width,height, 透明度：opacity.查看全部
-
制作移动的动画效果：<br><br> 设置定时器，timer=setInterval(function（）{}，时间)<br><br> 1.element.offsetleft为元素左的偏移量，当动画偏移达到目标值时，清空定时器clearInterval(timer);<br><br> 2.若鼠标触发，可能会反复触发定时器，产生累加效果，故开始动画之前都要清空定时器 3.使之以一定速度移动，element.style.left=element.offsetLeft+speed+'px'查看全部
-
记录下查看全部
-
$(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); }); }); });查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ 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);//1.2+++ }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、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }查看全部
-
运动实现的思路:left,right,width,height,opacity.查看全部
-
运动框架实现思路查看全部
-
jquery动画查看全部
-
淘宝布局查看全部
-
用for-in来遍历json数据。查看全部
举报
0/150
提交
取消