| Autor | Zpráva | ||
|---|---|---|---|
| Stanislav Profil |
#1 · Zasláno: 2. 9. 2013, 16:03:35 · Upravil/a: Stanislav
Dobrý den, mám problém, snažím se udělat 3 divy, který mají každý vlastní identifikátor a chci aby se dal každý div jednotlivě posunovat. Zatím se mi to tak nedaří.
Zde Samotný příklad (Omlouvám se, jsem stylistické čuně): HTML: <!doctype html>
<html lang="cz">
<head>
<meta charset="utf-8">
<title>pohybuj
</title>
<link rel="stylesheet" href="pohyb.css" media="all"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="1" class="kosticka">
<div class="top" id="top1"></div>
<div class="left" id="left1"></div>
<div class="right" id="right1"></div>
<div class="bot" id="bot1"></div>
</div>
<div id="2" class="trojuhelnik">
<div class="top" id="top2"></div>
<div class="left" id="left2"></div>
<div class="right" id="right2"></div>
<div class="bot" id="bot2"></div>
</div>
<div id="3" class="kolecko">
<div class="top" id="top2"></div>
<div class="left" id="left2"></div>
<div class="right" id="right2"></div>
<div class="bot" id="bot2"></div>
</div>
<script>
$( "#right1" ).click(function() {
$( "#1" ).animate({ "left": "+=50px" }, "fast" );
});
$( "#left1" ).click(function(){
$( "#1" ).animate({ "left": "-=50px" }, "fast" );
</script>
<script>
});
$( "#top1" ).click(function() {
$( "#1" ).animate({ "margin-top": "-=50px" }, "fast" );
});
$( "#bot1" ).click(function(){
$( "#1" ).animate({ "margin-top": "+=50px" }, "fast" );
});
</script>
<script>
$( "#right2" ).click(function() {
$( "#2" ).animate({ "left": "+=50px" }, "fast" );
});
$( "#left2" ).click(function(){
$( "#2" ).animate({ "left": "-=50px" }, "fast" );
});
</script>
<script>
$( "#top2" ).click(function() {
$( "#2" ).animate({ "margin-top": "-=50px" }, "fast" );
});
$( "#bot2" ).click(function(){
$( "#2" ).animate({ "margin-top": "+=50px" }, "fast" );
});
</script>
<script>
$( "#right3" ).click(function() {
$( "#3" ).animate({ "left": "+=50px" }, "fast" );
});
$( "#left3" ).click(function(){
$( "#3" ).animate({ "left": "-=50px" }, "fast" );
});
</script>
<script>
$( "#top3" ).click(function() {
$( "#3" ).animate({ "margin-top": "-=50px" }, "fast" );
});
$( "#bot3" ).click(function(){
$( "#3" ).animate({ "margin-top": "+=50px" }, "fast" );
});
</script>
</div>
</body>
</html>.kosticka{
height:80px;
width:80px;
position:absolute;
background:url("./ctverecek.jpg");
}
.trojuhelnik{
height:80px;
width:80px;
position:absolute;
background:url("./trojuhelnik.jpg");
}
.kolecko{
height:80px;
width:80px;
position:absolute;
background:url("./kolecko.jpg");
}
.top{
height:5px;
width:10px;
float:top;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.left{
height:10px;
width:5px;
float:left;
background-color:red;
margin-top:35px;
}
.right{
height:10px;
width:5px;
float:right;
background-color:red;
margin-top:35px;
}
.bot{
height:5px;
width:10px;
float:bottom;
background-color:red;
margin-top:70px;
margin-left:auto;
margin-right:auto;
}a výsledek je zde: http://alloutdubstep.ic.cz/pohybuj.html |
||
| Monkeys Profil * |
#2 · Zasláno: 2. 9. 2013, 16:10:49
Stanislav:
Kazdem classu pridaj napr. slide a potom napr. $(".slide").click(function()
{
$(this).slideDown("slow");
});M. |
||
| kaktuss Profil |
Možno ti to nefunguje, pretože sa všetky 3 div-y prekrývajú.
Pozri upravenú ukážku tu: http://jsfiddle.net/8GjR8/ Mimochodom, float atributy "top" a "bottom" neexistujú. |
||
| Stanislav Profil |
#4 · Zasláno: 2. 9. 2013, 16:43:30 · Upravil/a: Stanislav
kaktuss, Překrývají se, ale po odsunutí prvního objektu by se měl zobrazit další, a ten by měl také jít odsunout a tím se následně ukáže třetí.
Atributy float top a bottom byl jen výkřik do tmy, pak jsem to udělal marginem a nesmazal to. Monkeys: Děkuji, toto vypadá lépe, tak snad se mi to podaří, možná lepší než přes animaci. kaktuss: http://jsfiddle.net/L3M6V/ Jde to s Dvěma kostičkama, ale s tím třerím už ne. to samé co mi dělá přímo u mě. |
||
|
Časová prodleva: 11 let
|
|||
0