0

今日、私は隠された画像を動かすためにトップボタンを修正していました。空のアンカーを別のアンカーの下に置きたい。javascriptで使用されるアンカー、および非表示の画像をアニメーション化します。

これがjsfiddleですhttp://jsfiddle.net/JohnnyDevv/TR4ps/4/

そして、ここにhtml、javascript、cssがあるので、uはよりよく理解できます。

HTML

<div id="hidden-cartoons">
    <img src="https://lh6.googleusercontent.com/-aEPxXvvzbgE/UJesTFlawfI/AAAAAAAAAz4/iYJpZwkkZ20/s228/velejador.png" class="cartoon velejador">
    <img src="https://lh3.googleusercontent.com/-SdWM2VqioyI/UJesVjjZ6WI/AAAAAAAAA0A/vStlRdYcEWA/s338/bodoleite.png" class="cartoon bodoleite">
</div>    
<div id="cartoons-buttons">
    <a href="javascript:void(0)" class="left" id="velejador"></a>
    <a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
    <a href="javascript:void(0)" class="left" id="bodoleite"></a>
    <a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
</div>​

CSS

#hidden-cartoons {
    position:absolute;
    z-index:-99;
}

.cartoon {
    width:40px;
    position:absolute;
}
.cartoon.velejador {
    margin-top:10px;
    z-index:-99;
}

.cartoon.bodoleite {
    margin-top:60px;
    z-index:-99;
}   
#cartoons-buttons {
        width:320px;
        height:520px;
        position:absolute;
        z-index:100;
    } 
    .left {
        padding:20px;
        cursor:pointer;
        margin-right: 120px;
    }
    .right {
        padding:20px;
        cursor:pointer;
        margin-left: 120px;
    }
    #velejador {
        background-color:#00ff00;
    }
    #bodoleite {
        margin-top: 80px;
        background-color:#ff0000;
    }​

Javascript

$（document）.ready（function（）{

$('#velejador').mouseover(function() {
    $('.velejador').stop().animate({
        left: '+50',
        width: '40px'
    }, 1000);
}).mouseout(function() {
    $('.velejador').stop().animate({
        left: '0',
        width: '40px'
    }, 1000);
});
$('#bodoleite').mouseover(function() {
    $('.bodoleite').stop().animate({
        left: '+50',
        width: '40px'
    }, 1000);
}).mouseout(function() {
    $('.bodoleite').stop().animate({
        left: '0',
        width: '40px'
    }, 1000);
}); });​
4

1 に答える 1

2

CSSのクラス間にスペースはありません。

.cartoon .bodoleite {
margin-top:60px;
z-index:-99;
}

更新： http： //jsfiddle.net/TR4ps/32/

それらの.leftおよび.rightdivのポイントが何であったかわからない。アンカーを絶対的に配置し、高さと幅を与える必要がありました。少なくともこれがあなたが求めていたものだと思います。

#hidden-cartoons {
position:absolute;
z-index:-99;
}

.cartoon {
width:40px;
position:absolute;
}
.cartoon.velejador {
margin-top:0px;
z-index:-99;
}

.cartoon.bodoleite {
margin-top:60px;
z-index:-99;
}   
#cartoons-buttons {
width:320px;
height:520px;
position:absolute;
z-index:100;
} 
#velejador {
position:absolute;
height:60px;
width:40px;
background-color:#00ff00;
float:left;
}
#bodoleite {
position:absolute;
background-color:#ff0000;
float:left;
height:100px;
width:40px;
top:60px;
}    ​
于 2012-11-05T12:29:16.073 に答える