我想用左右箭头向后滑动w-1,w-2,w-3 div和堡垒。我知道也许我可以在这里使用负余量,但我不熟悉JQ。我不确定我应该从这样设置的div开始(向左浮动)。
HTML:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<div id="container">
<div id="arrows">
<ul class="button-group">
<li><a href="#" class="button">Left</a></li>
<li><a href="#" class="button">Right</a></li>
</ul>
</div>
<div id="windows">
<div id="w-1" class="w">
</div>
<div id="w-2" class="w">
</div>
<div id="w-3" class="w">
</div>
</div>
</div>
</body>
</html>
的CSS:
body {
padding: 20px;
}
#container {
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA;
}
#arrows {
width: 100%;
height: 100px;
background-color: #888888;
}
#arrows a {
color: white;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#windows {
width: 100%;
height: 80%;
background-color: #EAEAEA;
padding: 50px 0;
overflow: hidden;
position: relative;
}
.w {
width: 100%;
height: 400px;
margin-bottom: 50px;
}
#w-1 {
background-color: red;
}
#w-2 {
background-color: blue;
}
#w-3 {
background-color: green;
}
谢谢!
答案 0 :(得分:0)
试试这个::
function onClickRight()
{
$('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': '-95%'});
}
function RightToCenter()
{
$('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': ''});
}
function onCLickLeft()
{
$('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': '-95%'});
}
function LefttoCenter()
{
$('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': ''});
}