无法执行翻转框

Question

我一直试图像http://demo.rickyh.co.uk/flipping-crazy-css3/

那样使用翻转框

我尝试稍微修改它但是它不起作用，即使我尝试复制粘贴它根本不起作用的源代码。

那我哪里做错了？我必须安装特定的JavaScript吗？

注意：我只是在jsfiddle上试试 这是代码

的Javascript

var effectSpeed = 250;
function loadDemo(){
        var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');


        if(vendor == "Webkit"){
            loadWebKit();
        }
        else if(vendor == "Moz"){
            loadFox();
        }

}

function loadWebKit(){
                    var newStyles = new Hash({
                'webkitTransform': 'skew(@deg, @deg)'
            });

            $extend(Element.Styles, newStyles);

        var elements = $("main").getElements(".flips");

        // elements.setStyle("left", "0px");
         $("main").getElements(".flips").each(function(item, index){

            var currentStyles = item.getStyles("position", "left", "width", "height", "top");


            var toggle = false;
            item.addEvent('click', function(){
                        var extraT = 0;
                        var extraP = 0;
                    if(this.id == "flip4"){
                        extraT = 150;
                    }
                    if(this.id == "flip4"){
                        extraP = 500;
                    }



                    this.setStyle("overflow", "hidden");
                    var tp = this;
                    this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){

                        if(!toggle){
                            toggle = true;
                            item.addClass("toggleTrue");
                        }
                        else{
                            toggle = false;
                            item.removeClass("toggleTrue");
                        }

                        tp.setStyle('webkitTransform','skew(0deg, -20deg)');

                        tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){

                        }});
                        tp.morph({
                            'width': currentStyles.width,
                            'left': currentStyles.left, 
                            'webkitTransform': 'skew(0deg, 0deg)'
                         });  
                    }});





                     this.morph({
                        'width': 0,
                        'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                        'webkitTransform': 'skew(0deg, 20deg)'
                     });  
            });

    });



}


function loadFox(){
            $("webkit").getElement("span").innerHTML = "This ones webkit only"
            var newStyles = new Hash({
                'MozTransform': 'skew(@deg, @deg)'
            });

            $extend(Element.Styles, newStyles);

            var elements = $("main").getElements(".flips");

            elements.setStyle("MozTransform", "skew(0deg, 0deg)");



            $("main").getElements(".flips").each(function(item, index){

            var currentStyles = item.getStyles("position", "left", "width", "height", "top");
            var toggle = false;
            item.addEvent('click', function(){
                        var extraT = 0;
                        var extraP = 0;
                    if(this.id == "flip4"){
                        extraT = 150;
                    }
                    if(this.id == "flip4"){
                        extraP = 500;
                    }



                    this.setStyle("overflow", "hidden");
                    var tp = this;
                    this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){

                        if(!toggle){
                            toggle = true;
                            item.addClass("toggleTrue");
                        }
                        else{
                            toggle = false;
                            item.removeClass("toggleTrue");
                        }

                        tp.setStyle('MozTransform','skew(0deg, -20deg)');

                        tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){

                        }});
                        tp.morph({
                            'width': currentStyles.width,
                            'left': currentStyles.left, 
                            'MozTransform': 'skew(0deg, 0deg)'
                         });  
                    }});





                     this.morph({
                        'width': 0,
                        'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                        'MozTransform': 'skew(0deg, 20deg)'
                     });  
            });


    });







}

Answer 1

这是一种更简单，更清洁的方式

DEMO http://jsfiddle.net/kevinPHPkevin/UC6fK/

$(document).ready(function(){
            // set up hover panels
            // although this can be done without JavaScript, we've attached these events
            // because it causes the hover to be triggered when the element is tapped on a touch device
            $('.hover').hover(function(){
                $(this).addClass('flip');
            },function(){
                $(this).removeClass('flip');
            });
        });