ブラインドの特殊効果を実現するネイティブ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 の使用法)
推薦する
Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例
Docker の基本的な操作を学習した後、コンテナにいくつかの基本的なアプリケーションをデプロイして...
反応ループデータの実装（リスト）
まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...
jQueryはフォーム検証を実装する
jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...
Linux の一般的なコマンドとショートカット キーの紹介
目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....
Ubuntu での mysql のインストールと使用 (一般版)
Ubuntu のバージョンに関係なく、MySQL データベースのインストールは基本的に同じです。具...
CSS3 で背景ぼかしを実現する 3 つの方法 (要約)
1. 通常の背景ぼかしコード： <スタイル> html, 体 { 幅: 100%; 高...
MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル
バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...
Vue テンプレート構成と Webstorm コード形式仕様設定
目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...
リンク使用時にハイパーリンクがジャンプしないようにする方法
<a href="" onclick=""> を...
MySQLのグローバルロックとテーブルロックに関する詳細な理解
序文ロックの範囲に応じて、MySQL のロックは、グローバル ロック、テーブル ロック、行ロックに大...
Vue codemirrorはオンラインコードコンパイラの効果を実現します
序文Web 上でオンライン コード コンパイルの効果を実現したい場合は、 CodeMirrorを再度...
MySQL はリレーショナルデータベースですか?
MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...
Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法
目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...
ネイティブJavaScriptカルーセル実装方法
この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとお...
仮想マシンに Linux rhel7.3 オペレーティング システムをインストールする (具体的な手順)
仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...