0

以前にこの質問をし、いくつかのコードが提供されましたが、サイトが構造化されているため、div内に配置すると機能しなくなり、ここで再試行します。

これがページのフォーマットです。

http://jsfiddle.net/4FMGG/2/

<div style="width:960px;">
    <div style="float:left; width:960px;">
        <a href='#'>Electric</a>
        <a href='#'>Mechanic</a>
    </div>                    
    <div style="width:320px; float:left;">
        <div id='elec'>Box 1a</div>
        <div id='meca'>Box 2a</div> 
    </div>
    <div style="width:320px; float:left;">
       <img src="dial.png" style="margin-top:150px;">
    </div>
    <div style="width:320px; float:right;">
        <div id='meca'>Box 2b</div> 
        <div id='elec'>Box 1b</div>
    </div>
</div>​

基本的にhttp://mitchell-me.com/のサービスセクションを複製したいのです が、後ですべて変更しますが、その影響で私は死んでしまいます。前回、2つの提案がありました。1つはdivの外部で正常に機能するjqueryでしたが、div内にある必要があるため、使用できませんでした。2つ目は、サイトがトゥイーンライトを使用していたことですが、その方法はこの特定の機能だけではやり過ぎのようです。

だから基本的に私は狂ったように苦労しています、本当にクリスマスの前にサイトのこのセクションをラップする必要があるので、スタックオーバーフローxDでここにいくつかのクリスマスの幸運を期待しています

コード形式についてお詫び申し上げます。このエディタを使用して正しく配置することができません。

4

1 に答える 1

1

これをまとめて、あなたのニーズに合うかどうか教えてください。ここにフィドルがあります：http://jsfiddle.net/4FMGG/6/

CSS

    body{
    text-align:center;
    background:#eee;
}
.container {
    width:400px; margin:100px auto 0;
    text-align:center;
    position:relative;
}
#dial {
    width:210px;position:relative;margin:0 auto;
}
#switch {
    cursor: pointer;
}
#gear {
    position:absolute;
    top:55px;left:55px;
    opacity:0;
}
#bulb {
    position:absolute;
    top:70px;left:83px;
}
#mech1, #mech2, #elec1, #elec2 {
    position:absolute;
    width:100px;
    height:100px;
    background:#fff;
}
#mech1 {
    top:0;right:0;
    display:none;
}
#elec1 {
    top:0;left:0;
}
#mech2 {
    bottom:0;left:0;
    display:none;
}
#elec2 {
    bottom:0;right:0;
}

html

<div class="container">
    <div id="dial">
        <img src="http://mitchell-me.com/img/dial.png">
        <div id="bulb">
            <img src="http://mitchell-me.com/img/bulb.png">
        </div>
        <div id="gear">
            <img src="http://mitchell-me.com/img/gear.png">
        </div>
    </div>
    <div id="mech1"></div>
    <div id="mech2"></div>
    <div id="elec1"></div>
    <div id="elec2"></div>
    <div id="switch">
        <a id="one">One</a>
        <a id="two">Two</a>
    </div>
</div>

JavaScript

次のライブラリを含める必要があります。

//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

//jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js

$("#one").click(function(){
    $('#dial').rotate({
        angle: 100, 
        animateTo:0,
        duration:1000
    });
    $('#bulb').animate({'opacity':1}, 1000);
    $('#gear').animate({'opacity':0}, 1000);
    $('#mech1, #mech2').fadeOut(1000);
    $('#elec1, #elec2').fadeIn(1000);
});  


$("#two").click(function(){
    $('#dial').rotate({
        angle: 0, 
        animateTo:100,
        duration:1000
    });
    $('#bulb').animate({'opacity':0}, 1000);
    $('#gear').animate({'opacity':1}, 1000);
    $('#mech1, #mech2').fadeIn(1000);
    $('#elec1, #elec2').fadeOut(1000);
});
于 2012-12-23T22:25:28.313 に答える