query 处理图片跳动效果

分类:jquery实践

 跳动代码插件如下

//以下是移动到图片上的跳跳动画JS函数
function JumpObj(elem, range, startFunc, endFunc) {
	var curMax = range = range || 6;
   	startFunc = startFunc || function(){};
	endFunc = endFunc || function(){};
	var drct = 0;
	var step = 1;

	init();

	function init() { elem.style.position = 'relative';active() }
	function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
	function deactive() { elem.onmouseover = null }

	function jump() {
		 var t = parseInt(elem.style.top);
		if (!drct) motionStart();
		else {
			var nextTop = t - step * drct;
			if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
			else if(nextTop < -curMax) drct = -1;
		   else {
				var nextMax = curMax / 2;
				if (nextMax < 1) {motionOver();return;}
				curMax = nextMax;
				drct = 1;
			}
		}
		setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
	 }
	function motionStart() {
		startFunc.apply(this);
		elem.style.top='0';
		drct = 1;
	}
	  function motionOver() {
		endFunc.apply(this);
		curMax = range;
		drct = 0;
		elem.style.top = '0';
	}

	this.jump = jump;
	this.active = active;
	this.deactive = deactive;
}

调用的方法:

// 图标抖动
	$(".member_ico a").each(function(k,img){ 
		new JumpObj(img,10);
		//第一个参数代表元素对象
		//第二个参数代表抖动幅度
	});	

 

本文链接: query 处理图片跳动效果
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.