好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

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

清空信息
关闭评论
makerwins
 makerwins 约 5 小时前回复
#111
<a href="http://www.diveintovideo.com/femmes-ralph-lauren-short-gris-rose-polou">femmes ralph lauren short gris rose</a> <a href="http://www.myhybridshop.com/nike-cortez-classic-nylon-grau-chaussuresa">nike cortez classic nylon grau</a> <a href="http://www.nrthofhere.com/nike-free-3.0-kvinners-mint-gr%C3%B8nn-schuhee">nike free 3.0 kvinners mint gr酶nn</a> <a href="http://www.torilsdesign.com/adidas-ultra-boost-alle-r%C3%B8d-dot-scarpea">adidas ultra boost alle r酶d dot</a> <a href="http://www.bishoplitman.com/nike-free-tr-fit-marrone-gituttio-kurpese">nike free tr fit marrone gituttio</a> <a href="http://www.ksjfifgmif.com/youth-nike-new-york-jets-15-josh-mccown-limited-green-therma-long-sleeve-nfl-jersey-nflr">youth nike new york jets 15 josh mccown limited green therma long sleeve nfl jersey</a>
[url=http://www.makerwins.com/]makerwins[/url]
lordofvirtue
 lordofvirtue 约 20 小时前回复
#110
<a href="http://www.yupoji.com/reebok-gl-6000-white-shoesv">reebok gl 6000 white</a> <a href="http://www.visiotimes.com/nike-hyperrev-2016-ncs-skow">nike hyperrev 2016 ncs</a> <a href="http://www.qrsdeals.com/mackage-jacket-knock-off-mackager">mackage jacket knock off</a> <a href="http://www.eysenreich.com/adidas-crazylight-boost-mujeres-p%C3%BArpura-skod">adidas crazylight boost mujeres p煤rpura</a> <a href="http://www.mymusclefood.com/nba-jerseys-cleveland-cavaliers-23-lebron-james-jerseys-nfla">nba jerseys cleveland cavaliers 23 lebron james jerseys</a> <a href="http://www.cphwph.com/hermes-belt-strap-beltr">hermes belt strap</a>
lordofvirtue http://www.lordofvirtue.com/
pariswebjob
 pariswebjob 2019-03-19 04:23回复
#109
<a href="http://www.bgaddiict.com/nike-air-max-90-frau-schwarz-wei%C3%9F-rose-rot-schuhej">nike air max 90 frau schwarz wei脽 rose rot</a> <a href="http://www.deriogolf.com/nike-free-flyknit-3.0-m%C3%A4nner-ocean-blau-wei%C3%9F-schuhei">nike free flyknit 3.0 m盲nner ocean blau wei脽</a> <a href="http://www.poluscompany.com/oransje-adidas-wrestling-sko-obuvj">oransje adidas wrestling sko</a> <a href="http://www.pariswebjob.com/femminile-nike-free-flyknit-4.0-in-esecuzione-scarpe-grigio-scarpel">femminile nike free flyknit 4.0 in esecuzione scarpe grigio</a> <a href="http://www.dakvideo.com/nike-dunk-sky-hi-blanc-uk-chaussuresh">nike dunk sky hi blanc uk</a> <a href="http://www.freshkeema.com/a-buon-mercato-rosso-nike-cortez-scarpeh">a buon mercato rosso nike cortez</a>
pariswebjob http://www.pariswebjob.com/
zestchannel
 zestchannel 2019-03-19 02:20回复
#108
<a href="http://www.mwartsdrama.com/nike-flyknit-lunar-3-silber-gelb-schuhei">nike flyknit lunar 3 silber gelb</a> <a href="http://www.meshmotors.com/nike-lebron-12-wei%C3%9F-rot-schuheh">nike lebron 12 wei脽 rot</a> <a href="http://www.aspenmedisys.com/nike-lebron-12-low-svart-lilla-obuvj">nike lebron 12 low svart lilla</a> <a href="http://www.smartiesland.com/nike-lunarglide-6-arancia-argento-scarpep">nike lunarglide 6 arancia argento</a> <a href="http://www.emcetolerie.com/nike-air-max-lunar-1-femmes-blanc-violet-chaussuresh">nike air max lunar 1 femmes blanc violet</a> <a href="http://www.lapaktoko.com/prada-vs0339-bags-in-light-gray-pradah">prada vs0339 bags in light gray</a>
zestchannel http://www.zestchannel.com/
proximityhome
 proximityhome 2019-03-18 01:17回复
#107
<a href="http://www.salerahstore.com/nfl-mens-nike-los-angeles-chargers-22-jason-verrett-stitched-black-anthracite-salute-to-service-player-performance-hoodie-nfls">nfl mens nike los angeles chargers 22 jason verrett stitched black anthracite salute to service player performance hoodie</a> <a href="http://www.schokostueck.com/nike-air-force-one-rot-shop-scarpeg">nike air force one rot shop</a> <a href="http://www.sftfinance.com/air-jordan-future-low-r%C3%B8d-eye-obuvc">air jordan future low r酶d eye</a> <a href="http://www.cherrytreetv.com/barato-negro-and-blanco-nike-free-runs-scarpea">barato negro and blanco nike free runs</a> <a href="http://www.favarte.com/air-jordan-superfly-rouge-queen-schuheb">air jordan superfly rouge queen</a> <a href="http://www.docelarsjc.com/limited-nike-black-youth-joe-haden-jersey-nfl-23-pittsburgh-steelers-2016-salute-to-service-nflr">limited nike black youth joe haden jersey nfl 23 pittsburgh steelers 2016 salute to service</a>
proximityhome http://www.proximityhome.com/
objetpub
 objetpub 2019-03-17 13:19回复
#106
<a href="http://www.drtruth.net/air-jordan-superfly-2-fusion-rosso-jordans-butyd">air jordan superfly 2 fusion rosso jordans</a> <a href="http://www.drybulkintelligence.net/air-jordan-6-pinnacle-or-key-kurpesc">air jordan 6 pinnacle or key</a> <a href="http://www.dsicomposer.net/nike-internationalist-pale-lyser%C3%B8d-schuhea">nike internationalist pale lyser酶d</a> <a href="http://www.duckbeachmovie.net/nike-roshe-zapato-negro-plata-kurpesf">nike roshe zapato negro plata</a> <a href="http://www.dynamicbook.net/air-max-1-hvit-junior-chaussuresa">air max 1 hvit junior</a> <a href="http://www.earlylearninggroup.net/nike-air-foamposite-pro-svart-hvit-kurpesg">nike air foamposite pro svart hvit</a>
objetpub http://www.objetpub.net/
johannafrost
 johannafrost 2019-03-17 07:38回复
#105
<a href="http://www.xescortx.com/dark-blue-north-face-hoodie-northfaceh">dark blue north face hoodie</a> <a href="http://www.naturabottega.com/air-jordan-1-blau-and-schwarz-schuhek">air jordan 1 blau and schwarz</a> <a href="http://www.peddlir.com/nike-free-run-5.0-bl%C3%A5-and-lyser%C3%B8d-skoi">nike free run 5.0 bl氓 and lyser酶d</a> <a href="http://www.snowdaydc.com/nike-air-max-95-noir-and-blanc-chaussuresh">nike air max 95 noir and blanc</a> <a href="http://www.alliesindex.com/pittsburgh-panthers-top-of-the-world-ncaa-life-stretch-cap-hatl">pittsburgh panthers top of the world ncaa life stretch cap</a> <a href="http://www.cafekem.com/nike-air-max-90-essential-noir-and-or-chaussuresh">nike air max 90 essential noir and or</a>
johannafrost http://www.johannafrost.com/
flushandhunt
 flushandhunt 2019-03-16 06:58回复
#104
<a href="http://www.cardiachits.com/kvinders-nike-roshe-run-lilla-gr%C3%A5-skoj">kvinders nike roshe run lilla gr氓</a> <a href="http://www.zestchannel.com/air-jordan-retro-8-gull-gul-obuvi">air jordan retro 8 gull gul</a> <a href="http://www.eczacinim.com/kvinners-nike-cortez-gr%C3%B8nn-r%C3%B8d-obuvk">kvinners nike cortez gr酶nn r酶d</a> <a href="http://www.chilangorails.com/kvinners-air-jordan-retro-4-lilla-gr%C3%B8nn-obuvi">kvinners air jordan retro 4 lilla gr酶nn</a> <a href="http://www.mariusen.com/nike-zoom-clear-out-negro-cielo-azul-zapatosk">nike zoom clear out negro cielo azul</a> <a href="http://www.brittonoilco.com/coach-edge-studs-small-wristlet-coachh">coach edge studs small wristlet</a>
flushandhunt http://www.flushandhunt.com/
ikmsdkravmaga
 ikmsdkravmaga 2019-03-16 04:35回复
#103
<a href="http://www.truthtapes.com/nike-kd-8-high-rosso-verde-scarpel">nike kd 8 high rosso verde</a> <a href="http://www.veskopetrov.com/nike-roshe-run-hyp-silver-white-shoesj">nike roshe run hyp silver white</a> <a href="http://www.kaosmotogp.com/nike-lebron-12-low-photo-bl%C3%A5-skok">nike lebron 12 low photo bl氓</a> <a href="http://www.doularhythms.com/ua-curry-3-gul-rosa-obuvp">ua curry 3 gul rosa</a> <a href="http://www.animalpainvet.com/air-jordan-retro-9-womens-mint-green-red-shoesi">air jordan retro 9 womens mint green red</a> <a href="http://www.texarillo.com/air-jordan-imminent-guld-hvid-skoj">air jordan imminent guld hvid</a>
ikmsdkravmaga http://www.ikmsdkravmaga.com/
blockchainmkt
 blockchainmkt 2019-03-15 09:59回复
#102
<a href="http://www.lakefrontlane.com/nike-kyrie-3-weave-rose-blanc-butye">nike kyrie 3 weave rose blanc</a> <a href="http://www.minickphoto.com/air-max-95-no-sew-noir-and-bleu-obuve">air max 95 no sew noir and bleu</a> <a href="http://www.multinutwraps.com/new-nike-shox-r4-mennns-l%C3%B8ping-sko-obuvd">new nike shox r4 mennns l酶ping sko</a> <a href="http://www.paulacorley.com/adidas-crazy-light-boost-core-svart-flex-kurpesg">adidas crazy light boost core svart flex</a> <a href="http://www.catcogroup.com/nike-lebron-14-lmtd-coastal-blu-obuvb">nike lebron 14 lmtd coastal blu</a> <a href="http://www.charlesklamut.com/air-jordan-b-mo-rosa-himmelblau-butya">air jordan b mo rosa himmelblau</a>
blockchainmkt http://www.blockchainmkt.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸