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; //可选，默认缓冲速度为6
var 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) + '<br />';
}, t);
function setTarget() {
element.style[attr] = target + 'px';
clearInterval(timer);
}
}
return this;
};
<span style="white-space:pre"> </span>函数调用
$(function () {
$('#button').click(function () {
$('#box').animate({
'attr' : 'x',
'start' : 100,
'alter' : 50,
'target' : 0,
'step' : 7
});
});
});
HTML代码。我们仅仅须要设置一个ID就能够了，也就是在body找那个加入例如以下代码就可以
<div id="box">box</div> <input type="button" id="button" value="按钮" /> <div id="aaa"></div>
初次学习javaScript，感觉他真非常的奇妙。曾经学习HTML的时候。静态的网页是能够的，可是小相对于JavaScript,他更像是一个面向过程，须要什么，都是一步一步的来结局，而JavaScript更像是面向对象，把一些方法非常好的进行封装，从而更好的运用。难怪会叫JavaScript。有个Java的单词还真有点面向对象的意思。
