バッファリング効果を使用してレイヤーを開いたり、閉じたり、移動したりするための JS メソッド_javascript スキル
本文实例讲述了JS带缓冲效果打开、关闭、移动一个层的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JavaScript缓冲打开层</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
* {
margin:0; padding:0;
}
body {
margin:5px auto; text-align:center; background:#f0f0f0;
}
#d1 {
position:absolute; top:20px;
left:20px; width:100px; height:60px;
border:1px solid #808;
}
#d2 {
position:absolute; top:100px;
left:20px; width:100px; height:60px;
border:1px solid #808;
}
#open1, #close1, #open2, #close2 {
cursor:pointer; background:#ccf; margin:5px;
}
#open1, #open2 {
display:block;
}
#close1, #close2 {
display:none;
}
</style>
</head>
<body>
<div id="d1">
移动位置
<span id="open1" onclick="fo1()">Open</span>
<span id="close1" onclick="fc1()">Close</span>
</div>
<div id="d2">
改变大小
<span id="open2" onclick="fo2()">Open</span>
<span id="close2" onclick="fc2()">Close</span>
</div>
<div id="debug">AAA</div>
<script type="text/javascript">
//<[CDATA[
var sl = 20; //初始left值
var el = 500; //结束left值
var sw = 100;//初始width值
var ew = 580;//结束width值
var p = 10; //缓冲变量
var t = 20; //时间变量
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
var debug = document.getElementById('debug');
var open1 = document.getElementById('open1');
var close1 = document.getElementById('close1');
var open2 = document.getElementById('open2');
var close2 = document.getElementById('close2');
function fo1() {
var cl = parseInt(getStyle(d1,'left'));
//当前left值
if (cl<el) {
d1.style.left = cl + Math.ceil((el-cl)/p) + 'px';
//当前值+缓冲增量
debug.innerHTML = getStyle(d1,'left');
//cl + 'px';
setTimeout('fo1()', t);
} else {
d1.style.left = el + 'px';
open1.style.display = 'none';
close1.style.display = 'block';
}
}
function fc1() {
var cl = parseInt(getStyle(d1,'left'));
//当前left值
if (cl>sl) {
d1.style.left = cl - Math.ceil((cl-sl)/p) + 'px';
//当前值-缓冲增量
debug.innerHTML = getStyle(d1,'left');
//cl + 'px';
setTimeout('fc1()', t);
} else {
d1.style.left = sl + 'px';
open1.style.display = 'block';
close1.style.display = 'none';
}
}
function fo2() {
var cw = parseInt(getStyle(d2,'width'));
//当前width值
if (cw<ew) {
d2.style.width = cw + Math.ceil((ew-cw)/p) + 'px';
//当前值+缓冲增量
debug.innerHTML = getStyle(d2,'width');
//cw + 'px';
setTimeout('fo2()', t);
} else {
d2.style.width = ew + 'px';
open2.style.display = 'none';
close2.style.display = 'block';
}
}
function fc2() {
var cw = parseInt(getStyle(d2,'width'));
//当前width值
if (cw>sw) {
d2.style.width = cw - Math.ceil((cw-sw)/p) + 'px';
//当前值-缓冲增量
debug.innerHTML = getStyle(d2,'width');
//cw + 'px';
setTimeout('fc2()', t);
} else {
d2.style.width = sw + 'px';
open2.style.display = 'block';
close2.style.display = 'none';
}
}
function getStyle( elem, name ) {
if (elem.style[name]) { return elem.style[name]; }
else if (elem.currentStyle) { return elem.currentStyle[name]; }
else if (document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}
else { return null; }
}
//]]>
</script>
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7380
15
1628
14
1357
52
1267
25
1216
29
360 ブラウザによって推奨される広告をオフにするにはどうすればよいですか? PC で 360 ブラウザによって推奨される広告をオフにする方法は?
Mar 14, 2024 am 09:16 AM
360 ブラウザによって推奨される広告をオフにするにはどうすればよいですか?多くのユーザーが 360 ブラウザを使用していると思いますが、このブラウザは時々広告が表示され、多くのユーザーを悩ませています. このサイトでは、お使いのコンピュータで 360 ブラウザが推奨する広告をオフにする方法をユーザーに丁寧に紹介します。コンピュータ上の 360 ブラウザによって推奨される広告をオフにするにはどうすればよいですか?方法 1: 1. 360 セーフ ブラウザを開きます。 2. 右上隅にある「3 本の横棒」のロゴを見つけて、[設定] をクリックします。 3. ポップアップインターフェースの左側のタスクバーで[ラボ]を見つけ、[「360ホットスポット情報」機能を有効にする]にチェックを入れます。方法 2: 1. まずダブルクリックします。
Douyin ミニゲームはどこで開くことができますか? Douyin ミニゲームを開く 2 つの方法
Mar 15, 2024 am 09:30 AM
Douyin は人気のショート ビデオ ソーシャル アプリケーションで、ユーザーはさまざまな種類のショート ビデオ コンテンツを視聴および共有できるだけでなく、プレイできる一連のミニ ゲームも提供します。では、Douyin ミニゲームにはどこから参加できるのでしょうか? Douyin ミニゲームの入り口はどこですか?以下の詳細なチュートリアルを見てみましょう。方法 1: ミニ プログラムを開く 1. [My] オプションをクリックして、Douyin のホームページに入った後、[My] オプションをクリックして入ります。 2. 三本の横線をクリックします。My インターフェイスに入ったら、上の三本の横線のボタンをクリックします。 3. ミニ プログラムをクリックし、3 本の水平線のオプションを開いたら、その中にあるミニ プログラムをクリックします。 4. 「Douyin ミニ ゲーム」をクリックし、ミニ プログラム インターフェイスに入ったら、「Douyin ミニ ゲーム」オプションをクリックして開きます。方法 2: 検索して開く 1. 虫眼鏡をクリックして入力します。
Windows 11 でセキュリティ センターをオフにする方法
Mar 28, 2024 am 10:21 AM
Windows 11 は Microsoft がリリースした最新のオペレーティング システム バージョンです。以前のバージョンと比較して、Windows 11 ではシステム セキュリティの管理と監視が強化されており、重要な機能の 1 つがセキュリティ センターです。 Security Center は、ユーザーがシステムのセキュリティ ステータスを管理および監視して、システムがマルウェアやその他のセキュリティの脅威から確実に保護されるように支援します。セキュリティ センターはシステム セキュリティを保護するために重要ですが、ユーザーが個人的なニーズやその他の理由でセキュリティ センターを無効にしたい場合があります。この記事ではWの使い方を紹介します。
Windows11セキュリティセンターをオフにする方法を詳しく解説
Mar 27, 2024 pm 03:27 PM
Windows 11 オペレーティング システムでは、セキュリティ センターは、ユーザーがシステムのセキュリティ状態を監視し、マルウェアから防御し、個人のプライバシーを保護するのに役立つ重要な機能です。ただし、特定のソフトウェアをインストールするときやシステム チューニングを実行するときなど、ユーザーがセキュリティ センターを一時的にオフにする必要がある場合があります。この記事では、システムを正しく安全に運用するために、Windows 11 セキュリティ センターをオフにする方法を詳しく紹介します。 1. Windows 11 セキュリティ センターをオフにする方法 Windows 11 では、セキュリティ センターをオフにしても、
Kuaishou でパスワードなしの支払いを終了する方法 Kuaishou のパスワードなしの支払いを終了する方法に関するチュートリアル
Mar 23, 2024 pm 09:21 PM
Kuaishou は優れたビデオ プレーヤーです。Kuaishou のパスワード不要の支払い機能は、誰もがよく知っています。日常生活、特にプラットフォームで必要な商品を購入するときに非常に役立ちます。さて、支払いに行きましょう「キャンセルする必要があります。どうすればキャンセルできますか? パスワード不要決済機能を効果的にキャンセルするにはどうすればよいですか? パスワード不要決済のキャンセル方法は非常に簡単です。具体的な操作方法は整理されています。見ていきましょう」このサイトのガイド全体を見てみましょう。このガイドが皆さんのお役に立てれば幸いです。 Kuaishou でパスワードなしで支払いを終了する方法のチュートリアル 1. Kuaishou アプリを開き、左上隅にある 3 本の水平線をクリックします。 2. 「Kuaishou ストア」をクリックします。 3. 上のオプション バーで、パスワードなしの支払いを見つけてクリックします。 4.クリックして応援してください
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
Windows セキュリティ センターでリアルタイム保護をオフにする方法の詳細な説明
Mar 27, 2024 pm 02:30 PM
Windows オペレーティング システムは、世界で最も多くのユーザーを抱えるオペレーティング システムの 1 つとして、常にユーザーに支持されています。ただし、Windows システムを使用する場合、ユーザーはウイルス攻撃、マルウェア、その他の脅威など、多くのセキュリティ リスクに遭遇する可能性があります。システム セキュリティを強化するために、Windows システムには多くのセキュリティ保護メカニズムが組み込まれています。その 1 つが Windows セキュリティ センターのリアルタイム保護機能です。今回はWindowsセキュリティセンターのリアルタイム保護をオフにする方法を詳しく紹介します。まず、しましょう
TikTokプライベートメッセージの相手がプライベートメッセージモードをオフにしている場合、プライベートメッセージモードをオンにするにはどうすればよいですか?プライベート メッセージを送信する相手がプライベート メッセージ モードをオフにしているかどうかを確認できますか?
Mar 28, 2024 am 08:01 AM
Douyin は、ユーザーが自分の生活を記録し、幸せを共有できる人気のショートビデオ ソーシャル プラットフォームです。プライベート メッセージング機能は Douyin で重要な役割を果たしており、ユーザーが相互に対話する主な方法の 1 つです。場合によっては、相手がプライベート メッセージ モードをオフにしていて、メッセージを送信できない状況に遭遇することがあります。 1.Douyinプライベートメッセージの相手がプライベートメッセージモードをオフにしている場合、どうすればプライベートメッセージモードをオンにできますか? 1. 相手がプライバシー設定を有効にしているか確認する まず、相手がプライベートメッセージの受信を制限している可能性のあるプライバシー設定を有効にしていないかを確認します。知人からのプライベートメッセージのみを許可する設定をしている場合は、共通の友人やソーシャルメディアプラットフォームでのやり取りなど、他の手段で連絡を試みることができます。 2. 友達リクエストを送信します。相手がプライバシー設定をオンにしていない場合は、
