ブラインドの特殊効果を実現するネイティブ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 infobrightのインストール手順
目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...
MySQL における UNION と UNION ALL の基本的な使い方
データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...
HTML における DOM 要素のスクロールバースクロール制御の詳細な説明
dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次...
2つのウェブサイトページ翻訳プラグインの共有
TranslateThis URL: http://translateth.is Google 翻訳...
LinuxベースのApacheウェブサイトサービス構成の詳細な説明
オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...
MySQL データベースの文字化け問題の原因と解決策
序文データベースのデータを表示すると、文字化けした文字が表示されることがあります。実際、どのようなデ...
グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例
この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...
MySQL データベース クエリ パフォーマンス最適化戦略
クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...
MySQL でよく使われる型変換関数の概要 (推奨)
1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...
Docker共通コマンドの詳しい解説 Study03
目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...
Vueにおける仮想DOMの理解のまとめ
これは本質的に、ビュー インターフェース構造を記述するために使用される共通の js オブジェクトです...
Dockerを使用してOracle_11gをインストールする方法
DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...
Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...
CentOS7にJDK8をrpmモードでインストールする
CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...
VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル
VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...