jQuery运动框架和背景弹性运动导航分享
本文分享了jQuery的缓冲、加速、减速、弹性运动拓展方法jQueryAnimation。
四个参数：
type:运动的类型-字符串: 'ease'-缓冲运动，'add'-加速运动,'minus'-减速运动,'elastic'-弹性运动；
data:Json数据，运动的属性和目标值，无单位，透明度转换为整数即x100；
originSpeed:运动初始速度；
fn:运动结束后的回调函数。
方法返回一个jQuery对象，因此可连缀。
本例为一个背景运动的导航，采用弹性运动，还是挺有意思的。
自行体验吧，用法如下，也可参考本站分享的原生Javascript动画运动框架分享。
背景弹性运动导航：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷津渡口-背景震荡运动的导航分享</title>
<style>
body { margin: 0; padding: 0; }
#content { margin: 20px auto 0 auto; width: 900px; }
#qzz_nav { width: 100%; background: #01204f; height: 40px;position: relative; }
.qzz_menu { width: 900px; margin: 100px auto; padding: 0; list-style-type: none; position: relative; }
.qzz_menu li { float: left; margin: 0; padding: 0; }
.qzz_menu a { color: #fff; display: inline-block; height: 40px; line-height: 40px; padding: 0 10px; text-decoration: none; }
.qzz_nav_bg { position: absolute; height: 40px; background: red; }
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
(function($) {
$.fn.extend({
jQueryAnimate: function(type, data, originSpeed, fn) {
// 防止触发多个定时器
clearInterval(this.jQueryAnimateTimer);
// 获取初始速度
// 推荐初始速度originSpeed:
// 缓冲运动: 0
// 加速运动: 0
// 减速运动: 绝对值大于0，需要根据情况自行测试
// 弹性运动: 0
var jsonSpeed = {};
for (var attr in data) {
jsonSpeed[attr] = originSpeed;
}
// 开启定时器，触发运动
var $_this = this;
this.jQueryAnimateTimer = setInterval(function() {
// 定义结束标记
var bComplete = true;
// 获取每个属性进行运动
for (var attr in data) {
// 获取属性当前值
var iCurValue = 0;
if (attr == 'opacity') {
// 透明度转换为整数运算，必须使用Math.round
// 小数bug，偶尔出现类似.0000000001或者.99999999的情况
// 使用其他例如parseInt可能造成永远无法达到正确的值
iCurValue = Math.round(parseFloat($_this.css(attr)) * 100);
} else {
iCurValue = parseInt($_this.css(attr));
}
// 获取速度和新值
var iNewValue = 0;
switch (type) {
// 缓冲运动
case 'ease':
// 8为缓冲系数，可以自行调试修改
// 距离目标值越近，速度越慢
jsonSpeed[attr] = (data[attr] - iCurValue) / 8;
// 速度取整
jsonSpeed[attr] = jsonSpeed[attr] > 0 ? Math.ceil(jsonSpeed[attr]) : Math.floor(jsonSpeed[attr]);
// 获取新值
iNewValue = iCurValue + jsonSpeed[attr];
break;
// 加速运动
case 'add':
// 速度从0开始，不断加1，越来越快
// 新值超过目标值则直接赋值为目标值
if (jsonSpeed[attr] > 0 || iCurValue <= data[attr]) {
jsonSpeed[attr]++;
iNewValue = iCurValue + jsonSpeed[attr];
if (iNewValue > data[attr]) {
iNewValue = data[attr];
}
} else {
jsonSpeed[attr]--;
iNewValue = iCurValue + jsonSpeed[attr];
if (iNewValue < data[attr]) {
iNewValue = data[attr];
}
}
break;
// 减速运动
case 'minus':
// 速度从某个值不断减小，若一直不到达目标，速度最小绝对值为1
// 新值超过目标值则直接赋值为目标值
if (jsonSpeed[attr] > 0 || iCurValue <= data[attr]) {
if (jsonSpeed[attr] == 1) {
jsonSpeed[attr] = 1;
} else {
jsonSpeed[attr]--;
}
iNewValue = iCurValue + jsonSpeed[attr];
if (iNewValue > data[attr]) {
iNewValue = data[attr];
}
} else {
jsonSpeed[attr]++;
if (jsonSpeed[attr] == -1) {
jsonSpeed[attr] = -1;
}
iNewValue = iCurValue + jsonSpeed[attr];
if (iNewValue < data[attr]) {
iNewValue = data[attr];
}
}
break;
// 弹性运动
case 'elastic':
// 速度摆荡，可能为正，可能为负
// 若出现距离超过1，但速度却小于1时
// 由于弹性系数和摩擦系数的关系，凭借弹性永远无法到达指定位置
// 这种情况需要添加上帝力量，直接将速度绝对值变为1
jsonSpeed[attr] += (data[attr] - iCurValue) / 5;
jsonSpeed[attr] *= 0.7;
if (Math.abs(iCurValue - data[attr]) >= 1 && Math.abs(jsonSpeed[attr]) < 1) {
if (iCurValue < data[attr])
jsonSpeed[attr] = 1;
else
jsonSpeed[attr] = -1;
}
iNewValue = parseInt(iCurValue + jsonSpeed[attr]);
// 值不能为负值，否则出错，负值直接转为0
if (iNewValue < 0) {
iNewValue = 0;
}
break;
default:
break;
}
// 赋值运动和添加未结束标记
// 弹性运动特殊判断条件
if (type == 'elastic') {
// 距离大于1或者速度大于1则运动未结束
if (Math.abs(iCurValue - data[attr]) >= 1 || Math.abs(jsonSpeed[attr]) > 1) {
// 任何一个属性未结束则结束标记为假
bComplete = false;
// 透明度和距离分开赋值
if (attr == 'opacity') {
$_this.css('opacity', iNewValue / 100);
} else {
$_this.css(attr, iNewValue + 'px');
}
}
} else {
if (iCurValue != data[attr]) {
// 任何一个属性未结束则结束标记为假
bComplete = false;
// 透明度和距离分开赋值
if (attr == 'opacity') {
$_this.css('opacity', iNewValue / 100);
} else {
$_this.css(attr, iNewValue + 'px');
}
}
}
}
// 循环结束后标记未被设为假，因此所有属性都运动完成
if (bComplete) {
// 完成则清理定时器
clearInterval($_this.get(0).jQueryAnimateTimer);
// 判断是否有回调函数，若有则以当前对象调用
if (fn) fn.call($_this.get(0));
}
}, 30);
return this;
}
});
})(jQuery);
</script>
<script>
$(function() {
var $oQzzNavBg = $('.qzz_nav_bg');
var $aQzzMenuLi = $('.qzz_menu').find('li');
var iLeft = $('.qzz_active').offset().left;
var iWidth = $('.qzz_active').outerWidth();
$oQzzNavBg.css({left:iLeft,width:iWidth});
$aQzzMenuLi.each(function() {
$(this).hover(
function() {
iLeft = $(this).offset().left;
iWidth = $(this).outerWidth();
$oQzzNavBg.jQueryAnimate('elastic', {left: iLeft,width: iWidth}, 8);
},function() {
iLeft = $('.qzz_active').offset().left;
iWidth = $('.qzz_active').outerWidth();
$oQzzNavBg.jQueryAnimate('elastic', {left: iLeft,width: iWidth}, 8);
}
).click(function() {
$('.qzz_active').removeClass('qzz_active');
$(this).addClass('qzz_active');
});
});
});
</script>
</head>
<body>
<nav id="qzz_nav">
<div class="qzz_nav_bg"></div>
<ul class="qzz_menu">
<li class="qzz_active"><a href="#content">首页</a></li><li><a href="#home1">迷津渡口</a></li><li><a href="#music1">迷津电台</a></li><li><a href="#auv1">哎呦喂导航</a></li><li><a href="#home2">迷津渡口</a></li><li><a href="#music2">迷津电台</a></li><li><a href="#auv2">哎呦喂导航</a></li>
</ul>
</nav>
<section id="content">
<p id="home1">迷津渡口是一个好网站，你觉得呢？</p>
<p id="music1">迷津电台是一个好网站，你觉得呢？</p>
<p id="auv1">哎呦喂导航是一个好网站，你觉得呢？</p>
<p id="home2">迷津渡口是一个好网站，你觉得呢？</p>
<p id="music2">迷津电台是一个好网站，你觉得呢？</p>
<p id="auv2">哎呦喂导航是一个好网站，你觉得呢？</p>
</section>
</body>
</html>小指才疏学浅，有任何疏漏之处，请不吝赐教^_^
点赞6
支持一下