jQuery_jquery を使用して 3D テキスト効果を実装する方法

この記事の例では、jQuery が 3D テキスト効果を実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

この jQuery に基づく 3D テキスト効果のデモは、実際の 3D ではなく、複数のテキストで形成された 3D 効果です。Web ページの初回読み込み時にエラーが発生した場合は、当然ながらページを更新してください。使用中に問題は発生しません。

コードをコピー コードは次のとおりです:

   

 
• ajax

 
• css

 
• design

 
• firefox

 
• flash

 
• html

 
• Devirtuoso

 
• jquery

 
• PHP

 
• SEO

 
• usability

 
• www

 
• web

 
• xhtml

   

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
    var 要素 = $('#list a');;
    変数オフセット = 0;
    var ステッピング = 0.03;
    var list = $('#list');
    var $list = $(list)
    $list.mousemove(function(e){
        var topOfList = $list.eq(0).offset().top
        var listHeight = $list.height()
        ステッピング = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
    });
    for (var i = element.length - 1; i >= 0; i--)
    {
        element[i].elemAngle = i * Math.PI * 2 / element.length;
    }
    setInterval(render, 20);
関数 render(){
        for (var i = element.length - 1; i >= 0; i--){
            var angle = element[i].elemAngle offset;
            x = 120 Math.sin(角度) * 30;
            y = 45 Math.cos(角度) * 40;
            サイズ = Math.round(40 - Math.sin(角度) * 40);
            var elementCenter = $(element[i]).width() / 2;
            var leftValue = (($list.width()/2) * x / 100 - elementCenter) "px"
            $(element[i]).css("fontSize", サイズ "pt");
            $(element[i]).css("不透明度",size/100);
            $(element[i]).css("zIndex" ,size);
            $(element[i]).css("left" ,leftValue);
            $(element[i]).css("top", y "%");
        }
        オフセット = ステップ;
    }
});

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。