求助：这段jq代码是什么意思？

本帖最后由 u011320533 于 2014-08-01 13:59:37 编辑

解决方案 »

  1.   

    他就是调用了一个jquery自定义插件，然后对所有.tu_box 下面a为index的css属性进行了设置，设置之后是这样的：<a href="#" style="-webkit-transform: rotateX(0deg) scale(1); -webkit-transition: -webkit-transform 0.75s 50ms, opacity 1.5s; transition: -webkit-transform 0.75s 50ms, opacity 1.5s;">222</a>demo here
    大概其它的解释：<!doctype html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .tu_box a{background: #f1f1f1; padding:20px; margin-right:10px; text-decoration:none;}
            .tu_box a:hover{background: #ccc;}
        </style>
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
    </head>
    <body>
    <div class="tu_box">
        <a href="#">111</a><a href="#">222</a><a href="#">333</a>
    </div>
    <script type="text/javascript">
        // 这是一个众多自定义插件列表中的一个
        $.fn.extend({
            // 这是一个众多自定义插件列表中的一个
            say : function(){
                alert(111);
            },
            // 这是一个众多自定义插件列表中的一个
            setCss3 : function (json) {
                var transformQ = ['Webkit', 'Moz', 'O', 'ms', ''];
                for (var sAttr in json) {
                    if (sAttr.charAt(0) == '$') {
                        for (var t = 0; t < transformQ.length; t++) {
                            for (var i = 0; i < $(this).get().length; i++) {
                                $(this).get(i).style[transformQ[t] + sAttr.substring(1)] = json[sAttr];
                            }
                        }
                    }
                }
                return this;
            }
        });    $('.tu_box').on('click', function(){
            $(this).say();
            return false;
        });
        $('.tu_box').find('a').eq(1).setCss3({
            $Transform : 'rotateX(0deg) scale(1)',
            $Transition : '0.75s ' + 1 * 50 + 'ms -webkit-transform,1.5s opacity'
        });
    </script>
    </body>
    </html>关于翻转可以看看这2个：
    http://www.drewgreenwell.com/projects/metrojs
    http://ricostacruz.com/jquery.transit/
    jquery css3 3d动画插件