-
setInterval（函數(shù)，毫秒）；定時器
ele.style.left 修改left
ele.offsetLeft 當(dāng)前的left
ele.style.left = ele.offsetLeft + n + 'px'? 記得加px
timer = 定時器
clearInterval（timer）；清空定時器
記得一開始執(zhí)行函數(shù)的時候應(yīng)該清空定時器
onmouseover 鼠標(biāo)移入
onmouseout鼠標(biāo)移除
position:relative;指相對于自己原本的位置偏移；position:absolute;指相對于父元素的定位
?<span></span>是行內(nèi)元素，要添加position或者display才能設(shè)置寬度和高度
設(shè)置圓角半徑border-radius
元素運(yùn)動的單位距離跟運(yùn)動范圍長度相關(guān)，距離為非整數(shù)時，單位距離設(shè)置成整數(shù)可能出現(xiàn)問題，要注意調(diào)整
查看全部 -
其他方法發(fā)獲取屬性 特別是增加很多了屬性時 用這個函數(shù) 傳入?yún)?shù) 判斷參數(shù) 實(shí)現(xiàn)效果 注意 透明度是opacity是小數(shù) 用parseInt不合適 應(yīng)該parseFloat 四舍五入 Math.round(opacity)查看全部
-
parseInt（）獲取整數(shù)
? 透明度都是以小數(shù)get到，
????透明度沒有單位
obj.style.filter = 'alpha(opacity:' + (當(dāng)前值+變量) + ')'; //針對IE瀏覽器
obj.style.opacity = (當(dāng)前值，+ 變量）/100;//針對Firefox和Chrome瀏覽器
Math.round()//四舍五入的函數(shù)
查看全部 -
在有邊框的時候offset會出現(xiàn)很多問題
框架思想，當(dāng)框架差不多但是有一點(diǎn)區(qū)別的時候，可以將區(qū)別變?yōu)閰?shù)
查看全部 -
function getStyle(obj,attr){//獲取樣式
????if(obj.currentStyle){
????????return obj.currentStyle[attr];//currentStyle針對IE瀏覽器
????}
????else{
????????return getComputedStyle(obj,false)[attr];//針對Firefox瀏覽器
????}
}
獲取的時候：parseInt（getStyle（obj，‘width’））
查看全部 -
多物體動畫的時候，為了防止鼠標(biāo)移動過快導(dǎo)致的定時器爭搶，我們定義
obj.timer
每個obj用一個定時器就不會出現(xiàn)爭搶了
多物體運(yùn)動的時候，避免公用變量，
查看全部 -
Math.floor(num);向下取整
Math.ceil(num);向上取整
var speed = (iTarget-ele.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);//凡是運(yùn)動，要添加向下向上取整，以防出現(xiàn)錯誤
ele.style.left = ele.offsetLeft + speed + 'px';
查看全部 -
ele.offsetXX 只有寬高左右
?filter：alpha（opacity：30）；css中透明度30
opacity：0.3
?ele.style.fiter = 'alpha(opactiy:'+alpha + 速度+')';
?ele.style.opacity = (alpha+速度)/100;
查看全部 -
setInterval（函數(shù)，毫秒）；定時器
ele.style.left 修改left
ele.offsetLeft 當(dāng)前的left
ele.style.left = ele.offsetLeft + n + 'px'? 記得加px
timer = 定時器
clearInterval（timer）；清空定時器
記得一開始執(zhí)行函數(shù)的時候應(yīng)該清空定時器
查看全部 -
運(yùn)動框架實(shí)現(xiàn)思路
查看全部 -
運(yùn)動框架的實(shí)現(xiàn)思路
1，速度（left,right,width,height,opacity）
2 ，緩沖運(yùn)動
3,，多物體運(yùn)動
4，任意值變化
5，鏈?zhǔn)竭\(yùn)動
6，同時運(yùn)動
查看全部 -
css透明度{
????opacity：0-1；
????filter：Alpha（opacity = 0-100）；
}
查看全部 -
運(yùn)動框架實(shí)現(xiàn)思路
查看全部 -
window.onload=function(){
var para=document.getElementsByTagName("li");
for(var i=0;i<para.length;i++){
para[i].timer=null;
para[i].onmouseover=function(){
startMove(this,500);?? ?
}
para[i].onmouseout=function(){
startMove(this,300);?? ?
}?? ?
}
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
? var speed=(target-obj.offsetWidth)/20;
? speed=speed>0?Math.ceil(speed):Math.floor(speed);
?
?? if(obj.offsetWidth==target){
?? ?clearInterval(obj.timer);
?? ?
?? }
? else{
?? ?obj.style.width=obj.offsetWidth+speed+"px";
? }
?? ?},30)
}
}查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>JS速度動畫</title> ????<style> ????????*{ ????????????padding:0; ????????????margin:?0; ????????} ????????.shareWrap{ ????????????width:?200px; ????????????height:?150px; ????????????background:?burlywood; ????????????margin-top:?50px; ????????????position:?relative; ????????????left:?-200px; ????????} ????????.shareWrap?.share{ ????????????display:?inline-block; ????????????width:?22px; ????????????background:?aquamarine; ????????????padding:?2px?4px; ????????????position:?absolute; ????????????top:?0; ????????????right:?-30px; ????????} ????</style> </head> <body> <div?class="shareWrap"?id="shareWrap"> ????<span?class="share">分享</span> </div> <script> ???window.onload?=?function()?{ ???????var?oDiv?=?document.getElementById('shareWrap'); ???????var?timer?=?null; ???????//?鼠標(biāo)移入按鈕動畫 ?oDiv.onmouseover?=?function(){ ???????????startMove(0); ???????}; ???????function?startMove(iTarget){ ???????????clearInterval(timer); ???????????timer?=?setInterval(function(){ ???????????????var?speed?=?0; ???????????????if?(oDiv.offsetLeft?>?iTarget){???//?當(dāng)左側(cè)偏移量大于目標(biāo)位置時，那么速度是向左移動，為負(fù)值，?否則為正值 ?speed?=?-10; ???????????????}else{ ???????????????????speed?=?10; ???????????????} ???????????????if?(oDiv.offsetLeft?===?iTarget){??//當(dāng)元素移動到目標(biāo)位置時，清除定時器停止移動 ?clearInterval(timer); ???????????????}else{ ???????????????????oDiv.style.left?=?oDiv.offsetLeft?+?speed?+?'px'; ???????????????} ???????????},30); ???????} ???????//?鼠標(biāo)移出按鈕動畫 ?oDiv.onmouseout?=?function(){ ???????????startMove(-200); ???????} ???} </script> </body> </html>查看全部
舉報