案例实践：
- 第一页会以动画形式进入页面；
- 点击进入按钮时，第一页以动画消失，第二页以动画形式进入，同时四张图片也定义从小到大的动画形式；
- 第二页关闭按钮点击时，先是四张图片以缩小动画消失，然后第二页以动画形式消失，第一页以动画形式进入。
JS代码:
(function(){
// 定义变量
var container = $(‘.container‘); //主容器
var boxFront = $(‘.box-front‘); //卡片正面
var mkLogo = $(‘.img-head‘); //卡片logo(火焰logo)
var boxBack = $(‘.box-back‘); //卡片背面
var boxBackImgs= $(‘.box-back‘).find(‘img‘); //卡片背面中四幅图片
// 自定义动画---进入
$.Velocity.RegisterUI(‘mk.slideUp‘,{
defaultDuration:500,
calls:[
[{opacity:[1,0],translateY:[0,100]}]
]
});
// 自定义动画---消失
$.Velocity.RegisterUI(‘mk.slideDown‘,{
defaultDuration:300,
calls:[
[{opacity:[0,1],translateY:[100,0]}]
]
})
// 自定义动画---图片弹性放大
$.Velocity.RegisterUI(‘mk.scaleImg‘,{ //定义动画名称
defaultDuration:500,
calls:[
[{opacity:[1,0],scale:[1,0]}] //[1,0]表示[结束状态,开始状态]
]
})
// 自定义动画---图片弹性缩小
$.Velocity.RegisterUI(‘mk.scaleImg02‘,{
defaultDuration:500,
calls:[
[{opacity:[0,1],scale:[0,1]}]
]
})
// 定义正面进入序列
var seqFront = [
{
elements:container,
properties:‘mk.slideUp‘,
options:{
delay:300 // 设置延时
}
},
{
elements:boxFront,
properties:‘mk.slideUp‘,
options:{
sequenceQueue:false // 设置队列形式为同时
}
},
{
elements:mkLogo,
properties:‘mk.slideUp‘,
options:{
sequenceQueue:false,
delay:60
}
}
];
// 定义点击“进入”按钮正面消失的序列及背面出现的序列
var btnClick = [
{
elements:container,
properties:‘mk.slideDown‘
},
{
elements:boxFront,
properties:‘mk.slideDown‘,
options:{
sequenceQueue:false
}
},
{
elements:mkLogo,
properties:‘mk.slideDown‘,
options:{
sequenceQueue:false
}
},{
elements:container,
properties:‘mk.slideUp‘,
options:{
delay:100
}
},{
elements:boxBack,
properties:‘mk.slideUp‘,
options:{
sequenceQueue:false
}
},{
elements:boxBackImgs,
properties:‘mk.scaleImg‘,
options:{
delay:60
}
}
];
// 定义点击“关闭”按钮背面消失的序列和正面出现的序列
var closeClick = [
{
elements:boxBackImgs,
properties:‘mk.scaleImg02‘,
options:{
sequenceQueue:false
}
},
{
elements:container,
properties:‘mk.slideDown‘
},
{
elements:boxBack,
properties:‘mk.slideDown‘,
options:{
sequenceQueue:false
}
},
{
elements:container,
properties:‘mk.slideUp‘,
options:{
delay:200
}
},{
elements:boxFront,
properties:‘mk.slideUp‘,
options:{
sequenceQueue:false
}
},{
elements:mkLogo,
properties:‘mk.slideUp‘,
options:{
sequenceQueue:false
}
}
];
// 初始化正面
$.Velocity.RunSequence(seqFront);
// 正面进入按钮点击事件
$(‘.btn‘).on(‘click‘,function(){
$.Velocity.RunSequence(btnClick);
})
// 背面关闭按钮点击事件
$(‘.close‘).on(‘click‘,function(){
$.Velocity.RunSequence(closeClick);
})
})(jQuery)
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画案例</title>
<link rel="stylesheet" href="exmple.css">
<script src="js/jquery.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
</head>
<body>
<div class="container">
<!-- 卡片正面 -->
<div class="box-front">
<img class="img-back" src="imgs/back.jpg" alt="">
<img class="img-head" src="imgs/head.jpg" alt="">
<div class="intro">
<h3>慕课网</h3>
<span>慕课网,只学有用的。</span>
<a class="btn" href="##">点击进入</a>
</div>
</div>
<!-- 卡片背面 -->
<div class="box-back">
<div class="close">x</div>
<h3>慕课网</h3>
<span>慕课网,只学有用的。</span>
<img src="imgs/pic1.jpg" alt="">
<img src="imgs/pic2.jpg" alt="">
<img src="imgs/pic3.jpg" alt="">
<img src="imgs/pic4.jpg" alt="">
</div>
</div>
<script src="js/exmple.js"></script>
</body>
</html>
CSS样式:
*{ margin: 0; padding: 0; }
body{
background-color: #333; overflow-y:hidden;
}
.container{
width: 320px; height: 430px; background-color: #fff; margin: 60px auto;
position: relative;
}
/*正面*/
.box-front{
position: relative; z-index: 2;
}
.img-back{
width: 320px; height: 213px;
}
.img-head{
position: absolute; top: 213px; left: 50%; width: 90px; height: 90px; border-radius: 50%;
margin-left: -45px; margin-top: -45px; border:2px solid #f0f0f0;
}
.intro{
margin-top: 45px; text-align: center;
}
.intro h3{
display: inline-block; width: 100%; margin-top: 5px;
}
.intro span{
display: inline-block; width: 100%; margin-top: 15px;
}
.intro .btn{
display: inline-block; width: 82%; color: #fff; background-color: #2444FF; padding: 10px;
text-decoration: none; border-radius: 6px; margin-top: 40px; transition: background 1s;
cursor: pointer;
}
.intro .btn:hover{
background-color: #2468FF;
}
/*卡片背面样式*/
.box-back{
position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #333; z-index: 1
}
.box-back .close{
position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; line-height: 10px;
font-size: 18px; color:#999; cursor: pointer;
}
.box-back .close:hover{
color: #f00;
}
.box-back h3{
text-align: center; margin-top: 20px; font-size: 24px;
}
.box-back span{
display: block; text-align: center; font-size: 16px; margin: 10px 0 30px;
}
.box-back img{
display: inline-block; margin: 0px 0px 12px 10px; width: 143px;
}
.container,.box-front,.img-head,.box-back,.box-back img{
opacity: 0;
}
时间： 2024-10-03 21:41:29