ブラインドの特殊効果を実現するネイティブJS
|
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。
コードの実装は以下のとおりです。コピーして貼り付けてください。
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>ブラインドの特殊効果を実現するネイティブ JS</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
li {
リストスタイル: なし;
}
{
テキスト装飾: なし;
}
＃箱 {
幅: 562ピクセル;
パディング: 10px 24px 20px;
背景: #EACFCF;
オーバーフロー: 非表示;
マージン: 20px 自動 0;
}
。左 {
幅: 266ピクセル;
フロート: 左;
}
。右 {
幅: 266ピクセル;
フロート: 右;
}
#ボックス h2 {
高さ: 38px;
下境界線: 1px 実線 #D2A1A1;
左パディング: 20px;
}
#ボックス h2 強い {
フロート: 左;
行の高さ: 38px;
色: #885050;
フォントの太さ: 標準;
}
#ボックス h2 a {
フロート: 右;
幅: 52px;
高さ: 14px;
フォントサイズ: 12px;
テキストインデント: 10px;
色: #fff;
行の高さ: 12px;
フォントの太さ: 標準;
上マージン: 10px;
}
#ボックスli {
高さ: 30px;
位置: 相対的;
下境界線: 1px 破線 #D1A1A1;
}
#ボックス li div、
#ボックスリップ{
高さ: 30px;
位置: 絶対;
上: 0;
左: 0;
幅: 100%;
}
#ボックスリップ{
背景: #fff;
不透明度: 0;
フィルター:アルファ(不透明度=0);
}
#ボックス li div a,
#ボックス li div span {
行の高さ: 30px;
フォントサイズ: 12px;
高さ: 30px;
}
#ボックス li div a {
フロート: 左;
左パディング: 20px;
色: #7F5454;
幅: 172ピクセル;
オーバーフロー: 非表示;
}
#ボックス li div span {
右パディング: 10px;
フロート: 右;
色: #CF9494;
}
</スタイル>
<script type="text/javascript">
window.onload = 関数（）{
var oBox = document.getElementById("box");
タグ名によって要素を取得するには、 var aLi = document.getElementsByTagName('li');
var i = 0;
(i = 0; i < aLi.length; i++) の場合 {
var oP = aLi[i].getElementsByTagName('p')[0];
oP.iAlpha = 0;
oP.time = null;
aLi[i].onmouseover = 関数 () {
var oP = this.getElementsByTagName('p')[0];
oP.time ? clearInterval(oP.time): "";
oP.style.opacity = 1;
oP.style.filter = "alpha(不透明度=100)";
oP.iアルファ = 100;
}
aLi[i].onmouseout = 関数 () {
スター移動(this.getElementsByTagName('p')[0]);
};
}
};
関数starmove(obj) {
obj.time ? clearInterval(obj.time): "";
obj.time = setInterval(function () { domove(obj); }, 14);
}
関数 domove(obj) {
var iSpeed = 5;
obj.iAlpha <= iSpeed の場合 {
間隔をクリアします(obj.time);
obj.iAlpha = 0;
obj.time = null;
} それ以外 {
obj.iAlpha -= iSpeed;
}
obj.style.opacity = obj.iAlpha / 100;
obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
}
</スクリプト>
</head>
<本文>
<div id="ボックス">
<div class="left">
<h2>
<strong>最新ニュース</strong>
<a>さらに</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>コースに関するよくある質問</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>JS コース修了基準</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Webエフェクトコレクション（毎日更新）</a>
<span>20110322</span>
</div>
</li>
<li>
<p></p>
<div>
<a>クラスの場所</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>CSS コースの最終開始時間</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>最新の JavaScript コース開始時間</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>ゼロから始めるWebデザイン講座</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
<div class="right">
<h2>
<strong>新着情報</strong>
<a>さらに</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>JavaScript で実装された 3D 球状タグ クラウド効果</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>土曜日の JavaScript ミートアップのライブ録画</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Ali フロントエンドの面接の質問</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Google マップ フロントエンドの実装原則の簡単な分析 (パート 1)</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Windows 電卓 (簡易版) 宿題演習</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>アコーディオンイージング効果</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>JavaScript で実装された 3D 球状タグ クラウド効果</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
</div>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT
>>: MySQL で '%' を含むフィールドをクエリする方法の詳細な説明 (ESCAPE の使用法)
推薦する
JavaScript フロー制御 (ループ)
目次1. forループ2. 二重の for ループ3. whileループ4. dowhileループ5...
MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
Vue での props の使い方の紹介
序文： Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...
インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン
デザインの分野では、毎年さまざまなデザインのトレンドや流行があります。たとえば、近年のレスポンシブデ...
nginx の 2 つのモジュールの proxy_pass の違い
1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...
Linux で rc.local ファイルがない場合の完璧なソリューション
新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...
Ubuntu で中国語入力方法が使えない場合の解決策
Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...
Nginx 構成の実装 HTTPS セキュリティ認証
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...
Vueはメニューナビゲーションを実装するためにelement-uiを使用します
この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...
awk でのループの使用
同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...
JavaScript の基本: ループと配列
目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...
NginxはURLのパスに応じてアップストリームに動的に転送します
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
MySQL テーブル作成外部キー エラーの解決方法
データベーステーブルA: テーブル task_desc_tab を作成します （ id INT(11...
Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明
Keepalived のインストール: cd <keepalived_sourcecode_p...
mysql-8.0.17-winx64 のデプロイメント方法
1. 公式サイトからmysql-8.0.17-winx64をダウンロードし、Zipファイル形式を選択...