JavaScript初探之——圖片移動

JavaScript初探之——圖片移動

在我們開啟頁面的時候我們看到的大部分頁面都是動態，以前學習VB的時候要實現一些動態畫面第一個想到的就是用Flash，現在學習了BS的東西，才算是開眼界了，剛剛學習了一個動畫的效果，給大家展示一下，一個小小的函數，卻實現了讓頁面動起來的效果。

在很多的時候，我們為了實現一一些效果，比如漸層，移動，如果用Flash的畫，無疑為瀏覽器添加了太大的負載，如果用多張圖片一張一張顯示的畫，這樣做又太死板了，不利於我們的變化，所以最好的方法還是封裝一個方法，讓我們的圖片根據我們想要的效果移動，同時運用物件導向的方法來實現，也就是分裝一個方法，我們只需要設定參數就可以實現我們想要的方法的移動，是不是很方便了，廢話不多說，代碼加上

//設定動畫Base.prototype.animate = function (obj) {for (var i = 0; i < this.elements.length; i ++) {var element = this.elements[i];//長高變換動畫，只要加入 width 和 height 值即可。var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :    obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 'left';var start = obj['start'] != undefined ? obj['start'] : getStyle(element, attr);//可選，預設是CSS的起始位置var t = obj['t'] != undefined ? obj['t'] : 30;//可選，預設30毫秒執行一次var step = obj['step'] != undefined ? obj['step'] : 10;//可選，每次運行10像素//提供 alter 增量和 target 目標量兩種方案var alter = obj['alter'];var target = obj['target'];//緩衝運動var speed = obj['speed'] != undefined ? obj['speed'] : 6;//可選，預設緩衝速度為6var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';//可選，0表示勻速，1表示緩衝，預設緩衝if (alter != undefined && target == undefined) {target = alter + start;} else if (alter == undefined && target == undefined) {throw new Error('alter增量或target目標量必須傳一個！');}if (start > target) step = -step;element.style[attr] = start + 'px';clearInterval(window.timer);timer = setInterval(function () {//正值的使用 Math.ceil 取整，小數部分進一位。負值的時候使用 Math.floor，小數部分進一位。這樣就不會導致結束運動的時候不流暢突兀的感覺。if (type == 'buffer') {step = (target - getStyle(element, attr)) / speed;step = step > 0 ? Math.ceil(step) : Math.floor(step);}*///更好的解決多出幾個像素或少出幾個像素的方法if (step == 0) {setTarget();} else if (step > 0 && Math.abs(getStyle(element, attr) - target) <= step) {setTarget();} else if (step < 0 && (getStyle(element, attr) - target) <= Math.abs(step)) {setTarget();} else {//放在else永遠不會和停止運動通知執行，就不會出現303同時剪到300的問題//但是會出現不同時剪到300的問題，導致突兀element.style[attr] = getStyle(element, attr) + step + 'px';}document.getElementById('aaa').innerHTML += getStyle(element, attr) + '
';}, t);function setTarget() {element.style[attr] = target + 'px';clearInterval(timer);}}return this;};

函數調用

$(function () {$('#button').click(function () {$('#box').animate({'attr' : 'x','start' : 100,'alter' : 50,'target' : 0,'step' : 7});});});

HTML代碼，我們只需要設定一個ID就可以了，也就是在body找那個添加如下代碼即可

box

初次學習javaScript，感覺他真非常的神奇，以前學習HTML的時候，靜態網頁是可以的，但是小相對於JavaScript,他更像是一個面向過程，需要什麼，都是一步一步的來結局，而JavaScript更像是物件導向，把一些方法很好的進行封裝，從而更好的運用。難怪會叫JavaScript，有個Java的單詞還真有點物件導向的意思。