您的位置：首页 > Web前端 > JQuery

jquery模仿360开机动画案例

2020-07-14 05:04 411 查看

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.outer {
width: 200px;
position: fixed;
bottom: 0;
right: 0;
display: none;
}
span {
position: absolute;
border: 1px solid black;
cursor: pointer;
}
.topPart {
width: 200px;
height: 120px;
background-color: yellow;
}
.downPart {
width: 200px;
height: 120px;
background-color: yellowgreen;
}
</style>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(function(){
//1.进场动画
$('.outer').fadeIn(1500);
$('span').click(function(){
//2.下半部分高度慢慢变为0
$('.downPart').animate({
height:0
},500,function(){
//3.整个盒子宽度为0
$('.outer').animate({
width:0
},500);
});
});
});
</script>
</head>
<body>
<div class="outer">
<span>关</span>
<div class="topPart"></div>
<div class="downPart"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航