W moim dążeniu, aby dowiedzieć JavaScript czynię sam suwak, ale z animacji w javascript (przy użyciu css nie jest to problem dla mnie - to było robione na stronie Google), jak ten poniżej:Jak poprawnie przeprowadzić przesuwaną animację w javascript?
Oryginalny Google suwak (animacja z CSS):
http://www.google.com/about/datacenters/inside/
Moja praca do tej pory:
<!-- language-all: lang-html -->
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#promo{
display:block;
height: 354px;
width: 790px;
}
.promo-item {
width: 81px;
height: 354px;
float: left;
}
.promo-item.wide {
width: 613px;
}
.threeP {
background-color: rgb(206, 203, 203);
}
.oneP {
background-color: rgb(241, 220, 182);
}
.twoP {
background-color: rgb(187, 217, 226);
}
</style>
</head>
<body>
<div id="promo">
<div class="promo-item twoP wide" id="twoP">
<div>
</div>
</div>
<div class="promo-item threeP" id="threeP">
<div>
</div>
</div>
<div class="promo-item oneP" id="oneP">
<div>
</div>
</div>
</div>
<script type="text/javascript">
var oneP = document.getElementById('oneP');
var twoP = document.getElementById('twoP');
var threeP = document.getElementById('threeP');
step = 1;
function expandPanel1(){
var h = oneP.clientWidth + step;
oneP.style.width = h+"px";
if (h < 614 || h !=614) {
setTimeout("expandPanel1()", 5);
} else { oneP.style.width = 613+"px"; }
}
function expandPanel2(){
var h = twoP.clientWidth + step;
twoP.style.width = h+"px";
if (h < 614 || h !=614) {
setTimeout("expandPanel2()", 5)
} else { twoP.style.width = 613+"px"; }
}
function expandPanel3(){
var h = threeP.clientWidth + step;
threeP.style.width = h+"px";
if (h < 614 || h !=614) {
setTimeout("expandPanel3()", 5)
} else { threeP.style.width = 613+"px"; }
}
//---------------------------------------------
function expandPanel1Minus(){
var h = oneP.clientWidth - step;
oneP.style.width = h+"px";
if (h > 80 || h !=80) {
setTimeout("expandPanel1Minus()", 5)
} else { oneP.style.width = 81+"px"; }
}
function expandPanel2Minus(){
var h = twoP.clientWidth - step;
twoP.style.width = h+"px";
if (h > 80 || h !=80) {
setTimeout("expandPanel2Minus()", 5)
} else { twoP.style.width = 81+"px"; }
}
function expandPanel3Minus(){
var h = threeP.clientWidth - step;
threeP.style.width = h+"px";
if (h > 80 || h !=80) {
setTimeout("expandPanel3Minus()", 5)
} else { threeP.style.width = 81+"px"; }
}
//---------------------------------------------
oneP.onmouseover = function() {
expandPanel1()
expandPanel3Minus()
expandPanel2Minus()
}
twoP.onmouseover = function() {
expandPanel2()
expandPanel3Minus()
expandPanel1Minus()
}
threeP.onmouseover = function() {
expandPanel3()
expandPanel2Minus()
expandPanel1Minus()
}
</script>
Znam ten przykład ma błędów, jeśli to długa droga myszką na suwak, zaczyna „gwałtownie” run :) Ja celowo obniżona prędkość animacji.
Czy ktoś może udzielić mi wskazówek dotyczących prawidłowego wdrożenia?
Możesz to zrobić całkowicie za pomocą css3. Pracując nad przykładem dla ciebie. – tobspr
@ tobias-springer Wiem, że można to zrobić za pomocą css (dla mnie jest to dość proste), ale uczę się javascript i jestem bardzo zainteresowany, aby zrobić to z nim. – user1769072
Okay, ale tutaj jest rozwiązanie css: http://jsfiddle.net/aJzgJ/4/embedded/result/ – tobspr