仿360开机效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 322px;
				position: fixed;
				bottom:0;
				right:0;
			}
			span{
				position: absolute;
				top: 0;
				right: 0;
				width: 30px;
				height: 20px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span id="close"></span>
			<div class="hd">
				<img src="images/t.jpg" />
			</div>
			<div class="bd">
				<img src="images/b.jpg" />
			</div>
		</div>
		<script src="jquery1.0.0.1.js"></script>
		<script>
			window.onload=function(){
				var closeTop=document.getElementById("close");
				var box=closeTop.parentNode;
				var bd=document.getElementsByClassName("bd")[0];
				closeTop.onclick=function(){
					//下面盒子高度变为0,上面宽度为0;
					animate(bd,{"height":0},function(){
						animate(box,{"width":0});
					});
				}
			}
		</script>
	</body>
</html>

js封装见上上篇

发布了246 篇原创文章 · 获赞 65 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览