0

わかりました、ウェブサイトで機能に出くわしました。私にはそれがすばらしく見えます。同様の機能を再現しようとしてきましたが、近づくことさえできません。

この機能は、http://mitchell-me.com/ [サービス] をクリックすると表示されます。電気機械があります。

ボタンをクリックすると、円が回転し、その上のアイコンが新しいアイコンにフェードインし、div のフェードアウト/インします。jquery トグルを使用してこれを実行しようとしましたが、近づくことができません。

ここで、すべてのアドバイスまたは簡単なコード サンプルを取得したいと考えています。前もって感謝します私はこれで3日間頭がおかしくなりました。

4

2 に答える 2

1

彼らのJavaScriptはCSSを変えているようです。CSSは変換とフェードの作業を行います。

私は彼らのJavaScriptを覗き見しました...

$("#service li").click(function(e){e.preventDefault();var index=$(this).index();$('#service li').removeClass("active");if(!$(this).hasClass("active")&&!intrans){intrans=true;switch(index){case 0:TweenLite.to($(".dial"),1.5,{css:{shortRotation:0},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:0,rotation:0},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:1,rotation:0},ease:Expo.easeInOut});$('#electric, #electric1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;case 1:TweenLite.to($(".dial"),1.5,{css:{shortRotation:115,transformOrigin:"103px 103px"},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:0,x:0,y:0,rotation:120,transformOrigin:"20px 40px"},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:1,x:0,y:0,rotation:120,transformOrigin:"50px 48px"},ease:Expo.easeInOut});$('#electric, #electric1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;}}

そして、彼らはそれにTweenliteとTweenmaxを使用しているようです。

于 2012-12-23T15:31:42.453 に答える
0

この効果を jsFiddle で再構築しようとしましたが、これが結果です。このコードを使用する場合は、必ずこれを含めてください:<script src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>そうしないと、ローテーションが機能しません。すべての回転とフェードは、互換性を高めるために jQuery を介して行われます。

于 2012-12-23T15:53:05.030 に答える