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;							//可选，默认缓冲速度为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
		});
	});
});

<div id="box">box</div>

<input type="button" id="button" value="按钮" />
<div id="aaa"></div>

JavaScript初探之——图片移动

标签：javascript

原文地址：http://blog.csdn.net/lovemenghaibin/article/details/42007589