ページ上に疑似プログレスバーをgif画像として表示させる方法-CSSチュートリアル-php.cn

ページ上に疑似プログレスバーをgif画像として表示させる方法

yulia

リリース： 2018-09-25 17:43:28

オリジナル

2496 人が閲覧しました

仕事の便宜のために、いくつかのエフェクトを追加する必要があります。この記事では、擬似プログレスバーを使用してページに gif 画像を表示する方法を説明します。興味のある方は参考にしていただければ幸いです。あなたを助けられる。

最近のプロジェクトでは、操作をクリックした後、バックグラウンドでより多くの処理が実行されるため、少し時間がかかりました。このプロセスでは、顧客がボタンをクリックした後に再度クリックすることを防ぐために、プログレスバーと同様に、最初にボタンをクリックした後にページに GIF 画像が追加されます。。機能が完了したら画像を削除してください。

1 gif イメージ

ページ上に疑似プログレスバーをgif画像として表示させる方法

2 ボタンをクリックすると、フロントエンド JS コードによってマスキング用の img タグと DIV レイヤーが追加されます。

var tb_pathToImage = "Images/loadingAnimation.gif";
imgLoader = new Image(); //  image对象
    imgLoader.src = tb_pathToImage;
    $("body").append("<div id=&#39;Image_load&#39;><img  src=&#39;" + imgLoader.src + "&#39; / alt="ページ上に疑似プログレスバーをgif画像として表示させる方法" ></div>"); //page中增加Img
    $(&#39;#Image_load&#39;).show(); //show loader
    $("body").append("<div id=&#39;pageover&#39; class=&#39;pageover_bg&#39; ></div>");  //增加遮罩层

ログイン後にコピー

3 対応する CSS コードも追加します:

.pageover_bg {	
        background-color:#000;
    	filter:alpha(opacity=75);	
    	-moz-opacity: 0.75;	
    	opacity: 0.75;	
    	}	
 #Image_load{	
     position: fixed;	
     display:none;	
     height:13px;	
     width:208px;	
     z-index:103;	
     top: 50%;	
     left: 50%;	
     margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */	
     }

ログイン後にコピー

4 ボタンイベント応答が完了したら、IMG レイヤーと DIV レイヤーを削除します。

$(&#39;#Image_load&#39;).remove();           
        $(&#39;#pageover&#39;).remove();

ログイン後にコピー

レンダリング:

ページ上に疑似プログレスバーをgif画像として表示させる方法

以上がページ上に疑似プログレスバーをgif画像として表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。