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
支持一下