画像マーキー効果を実現するネイティブJS

画像マーキー効果を実現するネイティブJS

今日は、ネイティブ 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • マーキー効果を実現するネイティブJS
  • テキストマーキー効果を実現する js
  • js マーキー コード (自作)
  • マーキーをスクロールする JavaScript の 1 行テキスト
  • ステータスバーのマーキーテキスト効果を実装する JS コード
  • Javascript でマーキー効果を実装する簡単な例
  • js テキスト ボックスの移動マーキー効果コード共有
  • JavaScript マーキーホバーズーム効果実装コード
  • Marquee.js プラグインに基づくマーキー効果の例
  • JavaScript マーキー抽選の例

<<:  HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

>>:  MySQL での %% のようなファジークエリの実装

推薦する

VMware に Centos8 をインストールする詳細なチュートリアル

CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...

...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

Linux ファイル/ディレクトリの権限と所有権の管理

1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...

mysqlはタイムゾーン関連の問題を解決します

序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

CSS3 を使用して中心点の周りに要素を配置する方法の例

この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...

MySQL 5.7.15 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...

Ubuntu 18.04の下のディレクトリにディスクをマウントします

導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

入力テキストボックスの入力実装プロパティを無効にする

今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...

HTML+JS に基づくシンプルな年齢計算ツールの実装

目次序文デモンストレーション効果HTMLコードCSSコードJavascriptコードデモアドレス序文...

vsCodeはワンクリックでvueテンプレートを生成します

1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...