ブラインドの特殊効果を実現するネイティブ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 の使用法)
推薦する
MySQL の完全バックアップとクイックリカバリ方法
過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...
JavaScript でモバイル モーダル ボックスの効果を実現
この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考...
MyBatisインターセプターのページング機能を実装する方法
MyBatisインターセプターのページング機能を実装する方法序文：まず、実装原則についてお話しします...
Webフロントエンドスキル概要（個人の実務経験）
1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...
初心者向けの MySQL のインストール方法 (効果が実証済み)
1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...
CSS を使用してサブ要素に応じて異なるスタイルを記述する方法
達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...
初心者のためのMySQL外部キーの設定方法
目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...
JavaScript のよりエレガントなエラー処理方法 async await
目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...
MySQLの不合理なMaxIdleConnsにより接続が短くなる
1 背景最近、Shimo Document のオンライン ビジネスでパフォーマンスの問題が発生しまし...
Linux システムで grub.cfg ファイルの破損を修復する手順
目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...
jsのディープコピーを理解しましょう
目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....
Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析
<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...
Zabbixを使用してMySQLを監視する方法
Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...
Docker 自動ビルド 自動ビルド実装プロセス図
自動ビルドとは、Docker Hub を使用して、Dockerfile ファイルを含む GitHub...
DockerコンテナのIPアドレスを表示する方法
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...