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/上的服务部分， 稍后我会全部更改，但效果让我很丧。上次给了我两个建议，第一个是 jquery，它在 div 之外运行良好，但由于它必须在 div 中，所以我无法使用它。第二个是该站点正在使用 tweenlite，但这种方法对于这个特殊功能来说似乎有点过分了。

所以基本上我像疯了一样挣扎，真的需要在圣诞节前把网站的这一部分包起来，所以希望在堆栈溢出时能在这里获得一些圣诞节的好运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 回答