Question

我早些时候提过这个问题＆amp;提供了一些代码，但是当我把它放在div的内部时它拒绝工作，因为网站是结构化的，所以我在这里重试。

这是页面的格式。

<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/上的服务部分我会稍后改变它，但效果会让我感到害怕。我上次给了两个建议，1是jquery在div之外工作得很好但是因为它必须在div中我不能使用它。第二个是网站使用的是tweenlite，但这种方法对于这个特殊功能来说似乎有些过分。

所以基本上我就像疯了一样挣扎，真的需要在圣诞节之前把网站的这一部分包起来，所以希望在堆栈溢出xD上有一些圣诞运气

代码格式道歉，我无法使用此编辑器正确地坐下来。

Answer 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);
});

jquery用动画切换div

1 个答案: