您好，我需要一些帮助。
当我点击箭头时，我想要一个红色，蓝色和黄色的方块移出屏幕。 当我再次点击箭头时，我希望方块再次出现。
这是代码。代码可能看起来非常糟糕，因为我是css和html的新手。 ：3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="TEST.css" />
<script type="text/javascript" src="Index.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="social">
<a href="#"><img id="REDSquare" src="Images/youtube-icon.png" width="50px" height="60px" /></a>
<a href=""><img id="BLUESquare" src="Images/Facebook-icon.png" width="50px" height="60px" /></a>
<a href="#"><img id="YELLOWSquare" src="Images/PMC logo 3D.png" width="50px" height="60px" /></a>
<img id="Arrow" src="Images/arrow.png" width="50px" height="60px" />
</div>
</body>
</html>
body{
margin:0px 0px 0px 0px;
background:#999;
min-height:500px;
}
#social #REDSquare{
position:fixed;
margin-top:19.8%;
margin-left:-1px;
display:inline-block;
background:#e11b2b;
border:solid 1px #e11b2b;
border-left:solid 1px #e11b2b;
width:60px;
height:60px;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition:ease-in 0.2s;
}
#social #BLUESquare{
position:fixed;
margin-top:23%;
margin-left:-1px;
display:inline-block;
background:#3b579d;
border:solid 1px #3b579d;
width:60px;
height:60px;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition:ease-in 0.2s;
}
#social #YELLOWSquare{
position:fixed;
margin-top:26.3%;
margin-left:-1px;
display:inline-block;
background:#CC0;
border:solid 1px #CC0;
border-left:solid 1px #CC0;
width:60px;
height:60px;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition:ease-in 0.2s;
}
#social #Arrow{
position:fixed;
margin-top:30.1%;
margin-left:5px;
background-color:transparent;
border: 2px solid transparent;
border-radius:25px;
display:inline-block;
width:40px;
height:40px;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
transition:ease-in 0.3s;
}
#social #BLUESquare:hover{
border-left: solid 20px #3b579d;
}
#social #YELLOWSquare:hover{
border-left: solid 20px #CC0;
}
#social #Arrow:hover{
background-color:#000;
border:2px solid #000;
}
#social #REDSquare:hover{
border-left: solid 20px #e11b2b;
}
如果没有照片的话。我还不是声誉10 :(
如果您可以向网站发送说明如何操作的链接，或者您可以撰写评论，我们将不胜感激
P.Srry英语不好。我来自瑞典答案 0 :(得分：0)
这样的插件可能就是你想要的。
答案 1 :(得分：0)
这是用纯JS编写的解决方案：
var arrow = document.getElementById("Arrow");
var redSquare = document.getElementById("REDSquare");
var blueSquare = document.getElementById("BLUESquare");
var yellowSquare = document.getElementById("YELLOWSquare");
var iconsHided = false;
toggleIcons = function (){
if (iconsHided == false) {
iconsHided = true;
redSquare.style.marginLeft = "-62px"
blueSquare.style.marginLeft = "-62px"
yellowSquare.style.marginLeft = "-62px"
} else {
iconsHided = false;
redSquare.style.marginLeft = "-1px"
blueSquare.style.marginLeft = "-1px"
yellowSquare.style.marginLeft = "-1px"
}
}
arrow.addEventListener("click",toggleIcons)
工作小提琴： http://jsfiddle.net/e0pdftm5/1/
我看到您正在尝试使用％来定位图标。这可能与您期望的方式不同，正如您在示例小提琴中看到的那样。我认为你的结构过于复杂。尝试使用内容动画整个div，并使用类为您的图标定义类似的样式。这是一个例子：
<div id="social">
<a href="#"><img class="socialIcon" id="REDSquare" src="Images/youtube-icon.png" width="50px" height="60px" /></a>
<a href=""><img class="socialIcon" id="BLUESquare" src="Images/Facebook-icon.png" width="50px" height="60px" /></a>
<a href="#"><img class="socialIcon" id="YELLOWSquare" src="Images/PMC logo 3D.png" width="50px" height="60px" /></a>
</div>
<img id="Arrow" src="Images/arrow.png" width="50px" height="60px" />
CSS：
body {
margin:0px 0px 0px 0px;
background:#999;
min-height:500px;
}
#social {
position:fixed;
top:20%;
left:0px;
width:60px;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition:ease-in 0.2s;
}
.socialIcon {
position:relative;
display:inline-block;
width:60px;
height:60px;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition:ease-in 0.2s;
}
#REDSquare {
background:#e11b2b;
border:solid 1px #e11b2b;
border-left:solid 1px #e11b2b;
}
#BLUESquare {
background:#3b579d;
border:solid 1px #3b579d;
border-left:solid 1px #3b579d;
}
#YELLOWSquare {
background:#CC0;
border:solid 1px #CC0;
border-left:solid 1px #CC0;
}
#Arrow {
position:fixed;
top:350px;
left:5px;
background-color:transparent;
border: 2px solid transparent;
border-radius:25px;
display:inline-block;
width:40px;
height:40px;
-moz-transition: ease-in 0.3s;
-o-transition: ease-in 0.3s;
transition:ease-in 0.3s;
}
#BLUESquare:hover{
border-left: solid 20px #3b579d;
}
#YELLOWSquare:hover{
border-left: solid 20px #CC0;
}
#Arrow:hover{
background-color:#000;
border:2px solid #000;
}
#REDSquare:hover{
border-left: solid 20px #e11b2b;
}
JavaScript的：
var arrow = document.getElementById("Arrow");
var socialIcons = document.getElementById("social")
var iconsHided = false;
toggleIcons = function (){
if (iconsHided == false) {
iconsHided = true;
socialIcons.style.left = "-62px"
} else {
iconsHided = false;
socialIcons.style.left = "-1px"
}
}
arrow.addEventListener("click",toggleIcons)