<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?.head{
????????width:?800px;
?height:?600px;
?position:?absolute;
?top:?100px;
?left:?380px;
?}
??????.big{
????????width:?800px;
?height:?600px;
?overflow:?hidden;
?position:?absolute;
?}
??????.big?.middle{
????????width:?1600px;
?height:?600px;
?position:?absolute;
?left:?0;
?}
??????.left{
????????width:?30px;
?height:?30px;
?border-left:?7px?red?solid;
?border-bottom:?7px?red?solid;
?transform:?rotate(40deg);
?position:?absolute;
?top:?270px;
?left:?-500px;
?cursor:?pointer;
?transition:?left?1s;
?}
??????.right{
????????width:?30px;
?height:?30px;
?border-left:?7px?red?solid;
?border-bottom:?7px?red?solid;
?transform:?rotate(220deg);
?position:?absolute;
?top:?270px;
?right:?-500px;
?cursor:?pointer;
?transition:?right?1s;
?}
??????.one{
????????float:?left;
?width:?800px;
?height:?600px;
?background-color:?gray;
?}
??????.two{
????????width:?800px;
?height:?600px;
?background-color:?black;
?float:?left;
?}
????</style>
??</head>
??<body>
??????<div?class="head"?id="head">
????????<div?class="big"?id="big">
??????????<div?class="middle"?id="middle">
????????????<div?class="one"?id="one"></div>
????????????<div?class="two"?id="two"></div>
??????????</div>
????????</div>
????????<div?class="left"?id="left"></div>
????????<div?class="right"?id="right"></div>
??????</div>
????<script>
?var?head?=?document.getElementById("head");
?var?one?=?document.getElementById("one");
?var?two?=?document.getElementById("two");
?var?middle?=?document.getElementById("middle");
?var?left?=?document.getElementById("left");
?var?right?=?document.getElementById("right");
?head.onmouseover?=?function?()?{
????????left.style.left?=?"8px";
?right.style.right?=?"8px";
?};
?head.onmouseout?=?function?()?{
????????left.style.left?=?"-500px";
?right.style.right?=?"-500px";
?};
?function?onefunction()?{
????????middle.style.left?=?"0px";
?middle.style.transition?=?"left,0s";
?var?i?=?0;
?i++;
?console.log(i);
?if?(i?%?2?!==?0){
??????????two.style.?float?=?"left";
?one.style.?float?=?"right";
?}else?{
??????????two.style.?float?=?"right";
?}
??????}
??????left.onclick?=?function?()?{
????????middle.style.left?=?"-800px";
?middle.style.transition?=?"left,2s";
?setTimeout(onefunction,2100)
??????};
?</script>
??</body>
</html>
添加回答
舉報
0/150
提交
取消