Я пытаюсь создать эффект слайда, например, список воспроизведения Grooveshark или список воспроизведения You you. Пока что я реализовал кнопки и панель, но теперь я застрял в реализации эффекта слайда. Это код моего HTML-файла:
<!DOCTYPE html>
<html>
<head>
<title>CAMBIAR...</title>
<link rel="stylesheet" href="html 5/slider.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id="slider">
<div id="atras"><</div>
<div id="content">
</div>
<div id="adelante">></div>
<div id="operaciones">
<div id="add">+</div>
</div>
<div id="footer"></div>
</div>
<script>
$(document).ready(
function () {
var cuenta = 0;
var elementos = Array();
$("#slider #atras").mousedown(function() {
$(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)",
"color": "white"});
});
$("#slider #atras").mouseup(function() {
$(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
"color": "black"});
});
$("#slider #adelante").mousedown(function() {
$(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)",
"color": "white"});
});
$("#slider #adelante").mouseup(function() {
$(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
"color": "black"});
});
$("#slider #operaciones #add").click( function() {
var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>");
//new_element.insertAfter($("#slider #content .element:last-child"));
$("#slider #content").prepend(new_element);
});
});
</script>
</body>
</html>
Это мой CSS-файл:
* {
margin: 0px;
padding: 0px;
}
body {
background: #57595a;
font-family: Helvetica, sans-serif;
font-size: 16px;
text-align: center;
}
#slider {
border: 5px dotted white ;
margin: 20px auto;
line-height: 6.3em;
padding: 10px;
width: 95%;
}
#slider #atras {
background-color: #CCCCCC;
border-radius: 0.25em;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
color: black;
float: left;
height: 100%;
width: 3%;
}
#slider #atras:hover {
cursor: pointer;
}
#slider #content {
text-align: left;
float: left;
width: 74%;
}
#slider #adelante {
background-color: #CCCCCC;
border-radius: 0.25em;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
color: black;
float: left;
height: 100%;
width: 3%;
}
#slider #adelante {
cursor: pointer;
}
#slider #operaciones {
float: left;
width: 20%;
}
#slider #content .element {
background: orange;
border-radius: 0.5em;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: white;
display: inline-block;
height: 100px;
margin: auto 5px;
text-align: center;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 100px;
}
#slider #operaciones #add {
background-color: #f99200;
border-radius: 0.5em;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: white;
display: inline-block;
height: 50px;
vertical-align: middle;
margin: 2px 5px;
line-height: 3.2em;
text-align: center;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 50px;
}
#slider #content .element:hover {
background-color: #8a8a8a;
color: white;
}
#slider #operaciones #add:hover {
background-color: rgb(97, 103, 106);
cursor: pointer;
}
#footer {
clear: both;
}
Я ожидаю, что кто-то может помочь мне с этим. Любой подход действителен, мне просто нужно знать, что делать, а не делать это. Спасибо, я ценю помощь всех.