<!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
提交
取消