今日は、ネイティブ 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 での %% のようなファジークエリの実装
1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...
公式サイトからダウンロードしたmysql-8.0.19-winx64 Windows (x86、64...
効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...
序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...
序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...
この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...
vue2 プロジェクト開発の経験があれば、$refs に精通しているでしょう。 vue3 の急激なア...
遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...
Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...
序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...
前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...
オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...
最近、ポップアップ広告に取り組んでいました。デフォルト ページには z-index が設定されていな...
目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...