-
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
提交
取消