画像マーキー効果を実現するネイティブ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 での %% のようなファジークエリの実装

推薦する

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

vue3 統合 API における vue2 の $refs の代替方法についての簡単な説明

vue2 プロジェクト開発の経験があれば、$refs に精通しているでしょう。 vue3 の急激なア...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。

Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...

MySQLクエリ最適化分析チュートリアルをステップバイステップで教えます

序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...

Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介

前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

負のz-indexを持つ要素がクリックできない問題の解決策

最近、ポップアップ広告に取り組んでいました。デフォルト ページには z-index が設定されていな...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...