Webアプリケーション開発者の場合、バックグラウンドプログラムがユーザーがインターフェイスを閲覧したときにプログラムを長い間処理した場合、ユーザーはWebページで長い時間待ちますが、ページにこれ以上フレンドリーなプロンプトメソッドがない場合
(ダスティングの影響を増やすために追加)、ユーザーエクスペリエンスは特に良くありません。ユーザーは、今すぐ他のプログラムをクリックする必要があるかどうかを知りません。ユーザーは、Webページを待ち続ける必要があるか、他のページをクリックすることができるかどうかを知りません。
現在、比較的良い相互作用があります。これは、ほこりの効果を高めることです。 Framework extjsと同様に、extJのmask()およびunmask()関数は灰色の効果を提供し、もちろんjqueryはこのグレー化方法も提供します。ここで著者は彼ができることを望んでいます
ネイティブJSを使用して、独自のグレーリング効果を実現します。だから私は自分で試してみました。ほこりの効果を達成しました。ここでは、実装にのみ焦点を当てています。私はページの美学についてあまり調整していないので、ページはあまり美しくありません。ここに実装コードを投稿してください。
コード上のコードフラグメントに導出されたコードフラグメントを表示
< type = "text/css"> .maskstyle {background-color:#b8b8b8; z-index:1;フィルター:アルファ(不透明度= 50);不透明度:0.8;位置:絶対;テキストアライグ:センター;色:青;フォント:Bold 1em "安体"、Arial、Times;高さ:25px; font-weight:bold;オーバーフロー:隠し; } </style> </head> <script type = "text/javascript"> function creatmasklayer(effectItem、showtext){divitem = document.createelment( "div"); divitem.classname = "maskstyle"; divitem.style.lineheight = effectItem.offseTheight+"px"; divitem.innertext = showtext; divitem.style.width = effectItem.offsetWidth; divitem.style.height = effectItem.offsEtheight; divitem.style.top = effectitem.offsettop; divitem.style.left = effectItem.offsetLeft; RETURN VEVITEM; } function setMask(){var effectItem = document.getElementById( "test"); var escostmaskitem = findMaskitem(effectItem); if(expectmaskitem){return; } var showtext = "loading ..."; effectItem.AppendChild(CreatMasklayer(effectItem、showtext)); } function removemask(){var effectitem = document.getElementById( "test"); var maskitem = findmaskitem(effectItem); if(maskitem){effectItem.RemoveChild(maskitem); }} function findmaskitem(item){var children = item.children; for(var i = 0; i <children.length; i ++){if( "maskstyle" ==(children [i] .classname)){return children [i]; }}} </script> <body> <入力タイプ= "ボタン"値 "キャンセル" onclick = "setmask()"/> <入力タイプ= "ボタン" bulate "bulate" onclick = "removemask()"/> <br> <div id = "test" style = "border:1px; value = "test" onclick = "alert( 'ok!')"/> </div> </body> </html>をクリックできるかどうかコードの重要な部分を説明してください。
.Maskstyleは灰色の層スタイルです
で
コード上のコードフラグメントに導出されたコードフラグメントを表示
フィルター:アルファ(不透明度= 50);不透明度:0.8;
これは、灰色の層の透明度を表し、フィルター属性はIE8ブラウザーと互換性があることを表します。
Z-Indexプロパティは、要素のスタッキング順序を設定します。スタッキング順序が高い要素は、常に低いスタッキング順序で要素の前にあります。
PS:ダストの効果は、divに配置するために要素に粉塵を塗る必要があります