回転本部ここではjavascriptの

を使用してリンクされていますhttp://www.avineon.com/回転本部ここではjavascriptの

開き、このリンクは上に表示されます。 4つの画像が回転しています。

私はJavascriptを使って同様のことが必要です。

Javascriptを使用すると可能ですか？

2009-05-11 kumar

あなたが純粋なJavaScriptでそれをやろうとすると、あなたはたくさん運があるとは思わない。のような新興のキャンバスとSVGライブラリを使用することは可能ですが、ブラウザ間ではまだ問題があります。そのサイトではFlashが使用されていましたが、そのような効果を望む場合は、Flashを使用することをおすすめします。そう

...あなたのウェブサイトにかかわらず、また別の話であることをしたいと思う理由...

出典

2009-05-11 05:14:21 nickf

1は、その最後の点に同意します！ – alex

あなたは可能性が似たような、ではなく正確な。

透明性=これは.classファイルのdiv要素を埋めるために、画像のストレッチを行います

.class img { 
display: block; 
width: 100%; 
height: 100% 
}

このCSSでdivの中に画像幅=場所の画像を変更するFF、サファリ、IE7 + でサポートされています。次に、JSを使用して、カルーセルのようにこのdivを狭くすることができ、含まれている画像がdiv内でアニメーション化されます。

マウスの位置を追跡して、スピンする速度を判断する必要があります。

あなたが遠端（IIRC）

からのスムーズな加速のための余弦を使って数式を使用することができます。ただし、サーバーサイド言語や使用中のコピーを作成しない限り、逆に画像を取得することができなくなりますキャンバス。

出典

2009-05-11 05:17:37 alex

実際の3Dで何かをレンダリングしようとするのではなく、視覚効果を使って3D効果を近似することをお勧めします。つまり、実装されているものと同様に、キューブが回転しているように見えるようにパースペクティブ/イメージの変形を使用します。at this pageは、数学のより良い説明を含んでいます。

本当に、Flashを使用している方が良いでしょう。

出典

2009-05-11 05:24:39

JavaScriptの効果は、画像width,height、およびleftの各スタイルを時間の経過と共に変更するだけで可能です。それは関与したスクリプトですが、イメージ要素のそれぞれにこれらの3つのスタイルを補間する必要があります。

leftスタイルプロパティを移動しながら、回転効果を得るには、setIntervalファンクションの画像のwidthスタイルを減分します。 heightにも若干の減少があります。

両面に2枚の画像が必要です。幅が0に減少すると、反転されたバージョンのイメージと入れ替えられ、幅の増分が開始されます。

また、Webkit'sとFirefox'sトランスフォームCSSプロパティを使用してください。

または同様に見えるこれらのカバーフローの構成要素の一つ試してみてください。 Protoflow、 ImageFlow

出典

2009-05-11 15:51:44

-2

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<script type="text/javascript"> 

if (document.all || document.getElementById){ //if IE4 or NS6+ 
document.write('<style type="text/css">\n'); 
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n'); 
document.write('</style>'); 
} 

var curcontentindex=0; 
var messages=new Array(); 

function getElementByClass(classname){ 
var inc=0; 
var alltags=document.all? document.all : document.getElementsByTagName("*"); 
for (i=0; i<alltags.length; i++){ 
    if (alltags[i].className==classname) 
    messages[inc++]=alltags[i]; 
} 
} 

function rotatecontent(){ 
//get current message index (to show it): 
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0; 
//get previous message index (to hide it): 
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1; 
messages[prevcontentindex].style.display="none"; //hide previous message 
messages[curcontentindex].style.display="block"; //show current message 
} 

window.onload=function(){ 
if (document.all || document.getElementById){ 
    getElementByClass("dyncontent"); 
    setInterval("rotatecontent()", 5000); 
} 
} 

</script> 
<table width="100%"> 
     <tr align="center"> 
      <td> 
       <div class="dyncontent" style="display: block"> 
       first 
       </div> 
       <div class="dyncontent"> 
       second 
       </div> 
       <div class="dyncontent"> 
       Third 
       </div> 
      </td> 
     </tr> 
    </table> 

</body> 
</html>

出典

2010-09-02 15:14:02 Sundar

回転本部ここではjavascriptの

答えて

関連する問題