好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘