今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装されたコードは以下のとおりです。コピーして貼り付けてご利用ください。 <!DOCTYPE html> <html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" /> <title>画像マーキー効果を実現するネイティブ JS</title> <スタイル タイプ="text/css"> * { パディング: 0; マージン: 0; } li { リストスタイル: なし; } 画像 { 境界線: なし; } 体 { 背景: #eee; } .スライドモジュール{ 幅: 120ピクセル; 高さ: 400px; マージン: 0 自動; 背景: #fff; 境界線: 1px 実線 #ccc; 位置: 相対的; 上: 50px; } .スライドモジュール.up { 幅: 27px; 高さ: 27px; /* 上矢印 */ 背景: url(images/0.gif) 繰り返しなし; 位置: 絶対; 上: 4px; 左: 50%; 左マージン: -16px; カーソル: ポインタ; フィルター: アルファ(不透明度=60); 不透明度: 0.6; } .スライドモジュール.down { 幅: 27px; 高さ: 27px; /* 下矢印 */ 背景: url(images/5.gif) 繰り返しなし; 位置: 絶対; 下: 4px; 左: 50%; 左マージン: -16px; カーソル: ポインタ; フィルター: アルファ(不透明度=60); 不透明度: 0.6; } .スライドモジュール.ラップ{ 幅: 120ピクセル; 高さ: 330ピクセル; 位置: 絶対; 上: 35px; 左: 0; オーバーフロー: 非表示; } .スライドモジュールul { 幅: 120ピクセル; 位置: 絶対; 上: 0; 左: 0; } .slide-module li { 幅: 120ピクセル; 高さ: 110px; フロート: 左; } .スライドモジュールa { 表示: ブロック; 幅: 100ピクセル; 高さ: 100px; 境界線: 1px 実線の赤; マージン: 0 自動; 位置: 相対的; 上: 4px; } .slide-module a:hover { 境界線: 1px 実線 #333; } .スライドモジュール.アクティブ{ 境界線: 10px 実線 #000; } </スタイル> <script type="text/javascript"> window.onload = 関数(){ miaovスライド('miaovスライド'); }; 関数 miaovSlide(o) { //操作オブジェクト コンテナーを取得します。var obj = document.getElementById(o); (!obj) の場合、戻り値: //オブジェクトの下のすべてのdivを取得します var aDiv = obj.getElementsByTagName('div'); //上矢印を取得します var oUp = getClass('up'); //下矢印を取得します var oDown = getClass('down'); //画像コンテナを取得します。var oWrap = getClass('wrap'); //画像リストを取得します var oUl = oWrap.getElementsByTagName('ul')[0]; //画像リスト項目を取得します var oLi = oUl.getElementsByTagName('li'); var oTime = null; var iMs = 30; var i = 0; var iNum = 5; var トグル = -1; oUl.innerHTML += oUl.innerHTML; // 上をクリックすると上に移動します oUp.onclick = function () { トグル = -1; 自動再生(トグル); }; // 下をクリックすると、前方に移動します oDown.onclick = function () { トグル = 1; 自動再生(トグル); }; // 上下矢印が動かされたら、透明度を 1 に変更します oUp.onmouseover = oDown.onmouseover = 関数 () { this.style.filter = 'alpha(不透明度:100)'; this.style.opacity = 1; }; // 上下矢印が内側に移動したら、透明度を 0.6 に変更します oUp.onmouseout = oDown.onmouseout = 関数 () { this.style.filter = 'alpha(不透明度:60)'; this.style.opacity = 0.6; }; // 画像の移動方法、toggleは下方向または上方向の値を表します function autoPlay(toggle) { // 元のタイマーをクリアする if (oTime) { 間隔をクリアします(oTime); } // タイマーを再開する oTime = setInterval(function () { // 2 番目の増分 iNum += 2 * Toggle; // UL は、上の値が 0 より大きい場合に下がります if (iNum > 0) { // 上の値を負の UL 高さの半分に設定します (プルアップ) iNum = -oLi.length * oLi[0].offsetHeight / 2; } // UL は、上端値の絶対値が UL 自身の幅の半分より大きい場合に上がります。if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) { // 上の値を 0 に設定 (プルダウン) 数値 = 0; } // 上部の値を割り当てる oUl.style.top = iNum + 'px'; }, iMs); }; 自動再生(トグル); // 現在のスタイルを持つ要素を取得する function getClass(sName) { (i = 0; i < aDiv.length; i++) の場合 { (aDiv[i].className == sName)の場合{ aDiv[i]を返します。 } } } } </スクリプト> </head> <本文> <div class="slide-module" id="miaovSlide"> <!-- 上矢印 --> <div class="up"></div> <div class="wrap"> <ul> <li> <あ> <img src="images/1.jpg" /> </a> </li> <li> <あ> <img src="images/2.jpg" /> </a> </li> <li> <あ> <img src="images/3.jpg" /> </a> </li> <li> <あ> <img src="images/4.jpg" /> </a> </li> </ul> </div> <!-- 下矢印 --> <div class="down"></div> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT
>>: MySQL での %% のようなファジークエリの実装
CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...
目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...
1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...
序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...
目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...
目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...
この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...
Dockerのインストール カール -fsSL https://get.docker.com -o...
この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...
今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...
目次序文デモンストレーション効果HTMLコードCSSコードJavascriptコードデモアドレス序文...
1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...