                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Velocity.js实现弹出式相框

怎么我的点击“查看详情”之后跳出来的是这个界面？

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

// JavaScript Document
(function($){
     
    // 定义变量
    var container = $(".container");
    var box = $(".box");
    var buddy = $(".buddy");
    var pop = $(".pop");
    var open =$(".btn");
    var close = $(".close");
    var imgs = pop.find('img');
     
    //自定义动画
    $.Velocity.RegisterUI("lixin.slideUpIn",{
        defaultDuration:500,
        calls:[
            [{opacity:[1,0],translateY:[0,100]}]
        ]
    });
     
    $.Velocity.RegisterUI("lixin.slideDownOut",{
        defaultDuration:300,
        calls:[
            [{opacity:[0,1],translateY:[100,0]}]
        ]
    });
     
    $.Velocity.RegisterUI('lixin.scaleIn',{
        defaultDuration:300,
        calls:[
            [{opacity:[1,0],scale:[1,0.3]}]
            ]
        });
         
    $.Velocity.RegisterUI('lixin.scaleOut',{
        defaultDuration:300,
        calls:[
            [{opacity:[0,1],scale:[0.3,1]}]
            ]
        });
         
    // 动画序列    
    var seqInit = [{
        elements:container,
        properties:'lixin.slideUpIn',
        options:{
            delay:300
        }
    },{
        elements:box,
        properties:'lixin.slideUpIn',
        options:{
            sequenceQueue:false
        }
    },{
        elements:buddy,
        properties:'lixin.slideUpIn',
        options:{
            sequenceQueue:false,
            delay:60
        }
    }];
         
    var seqClick = [{
        elements:container,
        properties:'lixin.slideDownOut',
    },{
        elements:box,
        properties:'lixin.slideDownOut',
        options:{
            sequenceQueue:false
        }
    },{
        elements:container,
        properties:'lixin.slideUpIn'
    },{
        elements:pop,
        proterties:'lixin.slideUpIn',
        options:{
            sequenceQueue:false
        }
    },{
        elements:imgs,
        properties:'lixin.scaleIn'
    }];
     
    var seqClose = [{
        elements:imgs,
        properties:'lixin.scaleOut'
    },{
        elements:container,
        properties:'lixin.slideDownOut'
    },{
        elements:pop,
        properties:'lixin.slideDownOut',
        options:{
             sequenceQueue:false  
        }
    },{
        elements:container,
        properties:'lixin.slideUpIn'
    },{
        elements:box,
        properties:'lixin.slideUpIn',
        options:{
            sequenceQueue:false
        }
    }];
     
    // 事件绑定    
    $.Velocity.RunSequence(seqInit);
     
    open.on('click',function(){
        $.Velocity.RunSequence(seqClick);
    });
     
    close.on('click',function(){
        $.Velocity.RunSequence(seqClose);
    });
     
})(jQuery);