0

ここにリンクがあります：http ：//www.avineon.com/

このリンクを開くには、上部を参照してください。4つの画像が回転しています。

Javascriptを使用した類似のものが必要です。

Javascriptを使用して可能ですか？

4

5 に答える 5

6

純粋なJavaScriptでそれを行おうとすると、幸運はあまりないと思います。新しいキャンバスやRaphaelなどのSVGライブラリを使用することは可能かもしれませんが、それでもクロスブラウザの問題が発生します。そのサイトはFlashを使用していたので、そのような効果が必要な場合はFlashを使用することをお勧めします。

...なぜあなたがあなたのウェブサイトでそれを望むのかは別の話です...

于 2009-05-11T05:14:21.543 に答える
1

似たようなものもありますが、正確ではありません。

透明度=FF、Safari、IE7+でサポート画像幅の変更=このCssを使用して画像をdivに配置

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

これにより、画像が.classdivを満たすように引き伸ばされます。次に、JSを使用して、カルーセルのようにこのdivを狭くすることができ、含まれている画像はdiv内でアニメーション化されます。

次に、マウスの位置を追跡して、回転速度を決定する必要があります。

遠端からのスムーズな加速には、正弦波を使用した方程式を使用できます（IIRC）

ただし、サーバー側の言語でコピーを作成するか、キャンバスを使用しない限り、画像を逆に取得することはできません。

于 2009-05-11T05:17:37.123 に答える
0

最善の策は、実際の3Dで何かをレンダリングしようとするのではなく、視覚的なトリックを使用して3D効果を近似することです。つまり、遠近法/画像変形を使用して、このページで実装されているものと同様に、立方体が回転しているように見せます。これには、関連する数学のより良い説明があります。

ただし、実際には、Flashを使用する方がおそらく良いでしょう。

于 2009-05-11T05:24:39.843 に答える
0

この効果は、画像width、スタイルheight、およびleftスタイルを時間をかけて変更するだけで、JavaScript で実現できます。これは複雑なスクリプトですが、これら 3 つのスタイルをそれぞれの画像要素に補間するだけで済みます。

回転効果を得るには、スタイル プロパティを移動しながら、関数widthで画像のスタイルを減らします。また、若干の減りがあります。setIntervalleftheight

表と裏の各面に 2 つの画像が必要です。幅がゼロになったら、画像を反転したバージョンと交換し、幅を増やし始めます。

または、Webkit のおよびFirefox の変換 css プロパティを使用します。

または、類似したこれらの coverflow コンポーネントのいずれかを試してください: Protoflow、 ImageFlow

于 2009-05-11T15:51:44.993 に答える
-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-02T15:14:02.307 に答える