今天是南大軟院大神養成計畫實施的第十三天，今天學習的主要內容是js動畫效果。
在瀏覽網頁時候，我們經常會看到一些動畫，有一些是flash動畫，有一些則是用js編寫的js動畫，比如我們滑鼠移動在某乙個區域時，這時候出現乙個動畫效果，這有可能就是js動畫，在「js動畫」課程裡，我們將這類動畫稱之為「運動」。
運動框架實現思路：
既然是運動，我們首要定義運動的速度，運動的速度我們可以設定：left，right，height，width，opacity等引數，然後通過setinterval函式裡的間隔時間，就可以設定相應的速度。然後我們就要定義運動的方式，運動方式包括：緩衝運動，多物體運動，任意值運動，鏈式運動，同時運動。
簡單運動：
js**：
/*1.3精簡引數,
itarget:偏移目標值
用當前offsetleft的值與傳入的目標值來判斷增加和減少
*/function startmove(itarget)else;
if(odiv.offsetleft==itarget)else
}, 30);}
2.透明動畫：透明動畫就是通過觸發mouseover和mouseout事件來改變乙個塊級元素的透明度，如滑鼠在一張上，透明度就相應的改變了，滑鼠移出，透明度又回歸原來的樣子，當然這個過程也是要設立乙個改變透明度的乙個速度。原理和速度動畫的原理是一致的，但是這裡肯定有人會感到疑問如何設定乙個塊級元素的透明度呢？下面是相關設立透明度的**：
css定義透明度：
js 改變：
ie：style.filter=『alpha(opactiy:』+值+')'
非ie .style.opactiy=值/100（火狐或者chrome關於透明度的滿值1，ie是100）
透明度動畫**：
window.οnlοad=function()
odiv.οnmοuseοut=function()
}var timer=null;
var alpha=30;//設乙個變數為div的透明度，這裡時30%的透明度（根據ie瀏覽器的設定引數）
function startmove(itarget)else
if(alpha==itarget)else
},30)}
緩衝運動：
緩衝運動與簡單速度運動不一樣的地方就是運動速度不是一成不變的，而是會慢慢減少，做勻減速運動，所以緩衝運動主要原理和速度動畫是一樣的，主要差別在於速度的定義，下面我們看看速度的定義和實現需要了解的知識：
1、速度的定義：
var speed=(目標值-當前值（offset）)/引數；//引數越大，速度越慢，觀察的效果越明顯
2、取整函式：
向下取整：math.floor(3.55);是取整的數值，結果為：3
向上取整：math.ceil(3.35);//結果為：4
3、速度的取整判斷：
speed=speed>0?math.ceil(speed):math.floor(speed);//
條件操作位 這個表示式的意思是如果speed大於0（關係表示式返回true），則將math.ceil(speed)向下去整賦值給 speed，反之則將math.floor(speed)向上去整賦值給 speed
可以看出這裡的速度是會隨著left裡目標值越來越近，速度也就會相應的減慢，緩衝效果相比較簡單的速度動畫給人的效果要好一些。
下面是實現**：
var timer=null;
function startmove(itarget)else
},30);}
多物體運動：
多物體運動顧名思義就是乙個網頁中有多個div會包含動畫效果，每個div的動畫可以相同也可以不同。在實現多物體運動，我們應該避免所有元素共用同乙個東西，比如變數，否則可能會造成在快速滑鼠移動時，動畫效果會出現一些bug，帶給使用者不好的體驗。
多物體運動的原理和緩衝運動類似，我們這裡說的是多個div元素含有緩衝運動效果。
主要原理如下：
for迴圈來為每乙個tagnamelist[i]新增事件 並新增屬性來區分各自的定時器(用於取消)
利用引數中的this來指定所選擇的當前元素
多物體不要共用乙個值,在物件上定義乙個單獨的屬性保持值
存在多項共用乙個值，並且這個值會發生改變時，最好單獨給賦值，避免出現爭用的情況。
js**如下：
window.οnlοad=function();
ali[i].οnmοuseοut=function()
}var odivli=document.getelementsbytagname('div');
for(var j=0;j
odivli[j].timer=null;
odivli[j].alpha=30;
odivli[j].οnmοuseοver=function();
odivli[j].οnmοuseοut=function()}};
獲採樣式：
為什麼要獲採樣式呢？我們先看看dom.offsetwidth和dom.style.width的區別：
offsetwidth 包含了物件的邊線的寬度
width 若你不在html裡明確指定這個值，那它的返回值會不對。
從這裡可以看出這兩則有一點不同，這一點不同也決定了我們在不同場景下應該使用誰。在很多js**中，為了實現一些動畫效果，如改變css樣式的效果，則需要獲取相應的樣式然後去改變，所以我們應該懂得如何去獲取相應的樣式。
作為初學者的我們，也許有這樣的疑問dom.style和currentstyle獲採樣式有什麼差別嗎？這兩個函式都可以獲取物件。下面看看差別
兩種方法差別：
1、dom.style.*** 這種寫法只能獲取行內樣式 例如
div.style.width能獲取到是200px，但是沒有出現在style="" 引號中的樣式是獲取不到的.
但是假如我們要修改css樣式時，我們用dom.style.***='引數'去修改相關css樣式，按照個人理解就相當於加了乙個行內樣式，然後按照css樣式優先順序，行內樣式優先順序最高，所以這樣就改變了css樣式。
2、萬能方法
getcomputedstyle(div,null).*** 這個是標準方法，需要做一下相容
currentstyle 是ie的
所以看完以上的分析，我們可以自己封裝乙個相容所有瀏覽器的獲取任意的style的函式：
function getstyle(obj,style)else
}使用方法如getstyle(obj,width).
任意值運動：
任意值運動就是任意屬性的運動效果，如width，height，透明度的變化，這些我們只通過乙個框架就可以實現了。實現的主要原理還是跟前面幾類的運動差不多，設定定時器，然後設定改變屬性的速度就能完成相應的動畫效果了。
這裡就簡單說一下需要了解到的新知識：
傳入的透明度和其他屬性不一樣，要與其他屬性區分開來。
alert（0.07*100）輸出的是乙個小數，因為計算機無法準確的去儲存某個小數值，所以要利用math.round（四捨五入）來取整。
接下來看**：
function startmove(obj,attr,itarget)else
var speed=(itarget-icur)/8;
speed=speed>0?math.ceil(speed):math.floor(speed);
if(icur==itarget)elseelse
}},30);
}function getstyle(obj,attr)else
}上面就是今天所學的知識，物體運動的基本原理還是設定定時器，，然後根據速度改變屬性，這樣就實現了我們想要的動畫效果。
期待明天的，今天學習到的知識非常有趣，希望大家能夠自己設計一種運動。
南大軟院大神養成計畫 jquery
總算前進了一部分，進入新篇章的學習 1 id選擇器獲取頁面中指定的標籤並返回唯一乙個元素格式 id 2 elemement選擇器根據元素名稱找到 元素，可以呼叫.css 設定格式 element 3 class選擇器通過元素類別屬性查詢元素 class 獲取元素名稱.attr 4 選擇器，選擇全部元...
南大軟院大神養成計畫 第三天
今天是11月18號，離南大軟院大神養成計畫實施已經過去了三天，在這三天裡，我仍然在複習基礎教程。今天我學習的課程是 如何用css進行網頁布局 和 網頁布局基礎 兩個課程都是講解css的基礎部分，內容有所重合，但是又有所不同，雖然在開學初的網頁工程實訓的時候，我已經學習了一些css網頁布局基礎，但是我...
南大軟院大神養成計畫第四天
今天深入學習了css的相關應用，css在基礎應用下還具有繼承 層疊等特殊性。還有盒模型的應用，margin top margin right margin bottom margin left和border top border right border bottom border left和pad...