首页 > 代码库 > Velocity.js

Velocity.js

2024-08-16 13:03:07   218人阅读

极棒的jquery动画切换引擎插件Velocity.js。

技术分享
 duration:时长   delay:动画延时时间
技术分享
1：手动维护
技术分享
 2：complete:一层层嵌套
技术分享
 
3：推荐
-----------------------------
技术分享
 没有想要的效果：
技术分享
 案例：
index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹出式相框</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
            <div class="box">
                <img src="imgs/back.jpg" />
                <img class="buddy" src="imgs/head.jpg" />
                <div class="inner">
                    <h3>慕课网</h3>
                    <span>学习学习学习</span>
                    <div class="btn">查看课程</div>
                </div>
            </div>
            <div class="pop">
                <div class="close">×</div>
                <h3>慕课网</h3>
                    <span>学习学习学习</span>
                    <img src="imgs/pic1.jpg" />
                    <img src="imgs/pic2.jpg" />
                    <img src="imgs/pic3.jpg" />
                    <img src="imgs/pic4.jpg" />
            </div>
        </div>
        <script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 320px;
    height: 430px;
    border: 1px solid #ddd;
    background: #fff;
    margin: 10px auto;
}
.box{
    position: relative;
    z-index: 2;
}
.buddy{
    position: absolute;
    width: 96px;
    height: 96px;
    left: 50%;
    top:213px;
    border-radius:50% ;
    margin-left:-48px ;
    margin-top: -48px;
}
.inner{
    margin-top: 66px;
    text-align: center;
}
.inner span{
    font-size: 14px;
    color:#b4b4b4;
    display: inline-block;
    margin-top: 5px;
}
.btn{
    width: 90%;
    height: 45px;
    line-height:45px;
    margin-top:45px ;
    background-color:#5677fc ;
    color: #fff;
    display: inline-block;
    cursor:default;
    transition:background-color 0.2s; 
}
.btn:hover{
    background-color:#ccc ;
}
.pop{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.close{
    position: absolute;
    top: 0px;
    right: 10px;
    color: #999;
    font-size: 24px;
    font-family: helvetica;
    cursor: pointer;
}
.close:hover{
    color: #111;
}
.pop h3{
    margin-top: 15px;
}
.pop span{
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 30px;
    
}
.pop img{
    width: 125px;
    height: 125px;
    display: inline-block;
    margin: 10px;
}
.container,.box,.pop,.buddy,.pop img{
    opacity: 0.0;
}

new_file.js
(function($) {
    var container = $(".container");
    var box = $(".box");
    var buddy = $(".buddy");
    var pop = $(".pop");
    var open = $(".btn");
    var close = $(".close");
    var imgs = pop.find(‘img‘);
//1  进
    $.Velocity.RegisterUI(‘lx.slideUpIn‘, {
        defaultDuration: 500,
        calls: [
            [{
                opacity: [1, 0],
                translateY: [0, 100]
            }]
        ]
    });
//2   退
$.Velocity.RegisterUI(‘lx.slideDownOut‘, {
        defaultDuration: 300,
        calls: [
            [{
                opacity: [0, 1],
                translateY: [100, 0]
            }]
        ]
    });
    //拉片弹出式3
    $.Velocity.RegisterUI(‘lx.scaleIn‘, {
        defaultDuration: 300,
        calls: [
            [{
                opacity: [1, 0],
                scale: [1, 0.3]
            }]
        ]
    });
    //点击叉号4
    $.Velocity.RegisterUI(‘lx.scaleOut‘, {
        defaultDuration: 300,
        calls: [
            [{
                opacity: [0, 1],
                scale: [0.3, 1]
            }]
        ]
    });
    //主进场1
    var seqInit = [{
        elements: container,
        properties: ‘lx.slideUpIn‘,
        options: {
            delay: 300
        }
    }, {
        elements: box,
        properties: ‘lx.slideUpIn‘,
        options: {
            sequenceQueue:false
        }
    }, {
        elements: buddy,
        properties: ‘lx.slideUpIn‘,
        options: {
            sequenceQueue:false,
            delay: 60
        }
    }];
    //点击按钮后2
    var seqClixk =[{
        elements: container,
        properties: ‘lx.slideDownOut‘,
        options: {
            delay: 300
        }
    }, {
        elements: box,
        properties: ‘lx.slideDownOut‘,
        options: {
            sequenceQueue:false
        }
    }, {
        elements: container,//背面1
        properties: ‘lx.slideUpIn‘
    },{
        elements: pop,//背面盒子
        properties: ‘lx.slideUpIn‘,
        options: {
            sequenceQueue:false
        }
    },{
        elements: imgs,
        properties: ‘lx.scaleIn‘
    }];
    // 点击叉号后4
    var seqClose =[{
        elements: imgs,
        properties: ‘lx.scaleOut‘
    },{
        elements: container,
        properties: ‘lx.slideDownOut‘,
        options: {
            delay: 300
        }
    }, {
        elements: pop,
        properties: ‘lx.slideDownOut‘,
        options: {
            sequenceQueue:false
        }
    }, {
        elements: container,
        properties: ‘lx.slideUpIn‘
    },{
        elements: box,
        properties: ‘lx.slideUpIn‘,
        options: {
            sequenceQueue:false
        }
    }];
    //事件绑定
    $.Velocity.RunSequence(seqInit);
    
    open.on(‘click‘,function(){
        $.Velocity.RunSequence(seqClixk);
    });
    
    close.on(‘click‘,function(){
        $.Velocity.RunSequence(seqClose);
    });
    
})(jQuery); 

技术分享技术分享
 
  -------总结
技术分享
 a动完B动
技术分享

 

 


来自为知笔记(Wiz)


Velocity.js


联系
我们