目次
実装アイデア:
ホームページ ウェブフロントエンド jsチュートリアル スワイパー コントロールは、IE9 では指定されたページを正確に見つけることができません

スワイパー コントロールは、IE9 では指定されたページを正確に見つけることができません

Oct 11, 2017 am 10:16 AM
ie swiper 位置

アプリケーションシナリオ:

カルーセルコントロールを使用してテーブル内の画像ファイルをクリックすると、カルーセルコントロール(スワイパー)を使用して指定した画像を表示することができます。ページを左右にめくって、すべての写真を前後に閲覧します。

実装アイデア:

(1) JSを使用してSwiperの胴体を作成します(Swiperは魂に相当し、魂は体に取り付けられて機能する必要があります)。

    	__createPreviewHtml: function(){
    		if($('#__sc1').length>0) return;
    		var html = 
    		&#39;<p id="__sc1" class="swiper-container" style="z-index:9999;">&#39; 
    		+ &#39;	<a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>&#39;
    		+ &#39;	<p class="swiper-wrapper">   &#39;
    		+ &#39;</p> &#39;
    		+ &#39;<p class="swiper-pagination"></p>&#39;
    		+ &#39;<p class="swiper-button-prev"></p>&#39;
    		+ &#39;<p class="swiper-button-next"></p>&#39;    	    
    		+ &#39;</p>&#39;;
    		$(document.body).append(html);
    		$(&#39;#__sc_closeBtn&#39;).on(&#39;click&#39;,this.__hidePreviewBox);
    	}
ログイン後にコピー

(2) テーブル内の画像ファイルを走査し、Swiper の胴体に押し込み、クリックされた画像ファイルのインデックス番号 (インデックス) と URL (ファイル ID で一意に識別される) を取得します。

        		var index = 0;
        		var i = 0;
        		me._grid.findRow(function(row){ 
        			
    	        	var fileId2 = row.fileId;	
    	            var fileName2 = row.fileName.toLowerCase();
    	            
    	            if(fileName2 && imgReg.test(fileName2)==true){    	          	
    	            	if(fileId == fileId2){
    	            		index = i;
    	            	}
    	            	
    	            	var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2);
    	            	var imgHtml = &#39;<img src="&#39; + picParam + &#39;"/>&#39;;
               	 	 	var $slide = $(&#39;<p class="swiper-slide">&#39; + imgHtml + &#39;</p>&#39;);
               	 	 	$(&#39;.swiper-wrapper&#39;).append($slide);
               	 	 	i++;
    	            }
        		}); 
        		
        		if(typeof(mySwiper) != &#39;undefined&#39;){
        			mySwiper.removeAllSlides();
        		}
ログイン後にコピー

(3) Swiper コントロールを作成し、Swiper の slideTo(index) メソッドを使用して指定した位置を見つけて画像を表示します。

りー

以上がスワイパー コントロールは、IE9 では指定されたページを正確に見つけることができませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vue3 でスワイパーを使用するときに発生する問題を解決する方法 vue3 でスワイパーを使用するときに発生する問題を解決する方法 May 11, 2023 pm 01:07 PM

1. swiper をインストールします。npminstallswiper を使用して、swpier プラグイン npminstallswiper-s//@9.2.0// をインストールするか、指定されたバージョン npminstallswiper@8.4.7-s をインストールします。 2. swiper を使用して、公式ウェブサイト。プロジェクトはエラーを報告します。解決策: 導入されました。コンポーネントは次のパスを使用します。 import{Swiper,SwiperSlide}from "swiper/vue/swiper-vue"; import "swiper/swiper.min.css"; 場合によっては必須です

uniappで地図と位置情報機能を使用する方法 uniappで地図と位置情報機能を使用する方法 Oct 16, 2023 am 08:01 AM

uniapp で地図および測位機能を使用する方法 1. 背景の紹介 モバイル アプリケーションの人気と測位技術の急速な発展により、地図および測位機能は現代のモバイル アプリケーションに不可欠な部分になりました。 uniapp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション開発フレームワークであり、開発者が複数のプラットフォームでコードを共有しやすくなります。この記事では、uniapp でのマップと位置決め関数の使用方法を紹介し、具体的なコード例を示します。 2. uniapp-amap コンポーネントを使用してマップ関数を実装します。

Apple ワイヤレス イヤホンを紛失した場合の探し方_Apple ワイヤレス イヤホンの探し方 Apple ワイヤレス イヤホンを紛失した場合の探し方_Apple ワイヤレス イヤホンの探し方 Mar 23, 2024 am 08:21 AM

1. まず、携帯電話で[検索]アプリを開き、デバイスインターフェイスのリストからデバイスを選択します。 2. 次に、場所を確認し、ルートをクリックしてそこに移動します。

WordPress プラグインを使用してインスタント位置情報機能を実装する方法 WordPress プラグインを使用してインスタント位置情報機能を実装する方法 Sep 05, 2023 pm 04:51 PM

WordPress プラグインを使用してインスタント位置情報機能を実現する方法 モバイルデバイスの普及に伴い、ますます多くの Web サイトが位置情報ベースのサービスを提供し始めています。 WordPress Web サイトでは、プラグインを使用して即時測位機能を実装し、訪問者に地理的位置に関連するサービスを提供できます。 1. 適切なプラグインを選択する WordPress プラグイン ライブラリには、地理位置情報サービスを提供する多くのプラグインから選択できます。ニーズと要件に応じて、適切なプラグインを選択することが、即時測位機能を実現する鍵となります。ここにいくつかあります

Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Apr 14, 2023 pm 06:13 PM

Internet Explorer が長い間人気がなくなってきたことは周知の事実ですが、Windows 11 の登場により現実が始まりました。 Edge は、将来的に IE を置き換えるのではなく、現在 Microsoft の最新オペレーティング システムのデフォルトのブラウザーとなっています。現時点では、引き続き Windows 11 で Internet Explorer を有効にすることができます。ただし、IE11 (最新バージョン) の正式な廃止日は 2022 年 6 月 15 日であり、時間は刻々と過ぎています。これを念頭に置くと、Internet Explorer が Edge を開くことがありますが、それが気に入らないことに気づいたかもしれません。では、なぜこのようなことが起こっているのでしょうか?存在する

win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) Feb 10, 2024 am 10:30 AM

ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか?解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト(管理者)」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。

Amapで相手の携帯電話の位置を確認する方法 - Amapで相手の携帯電話の位置を確認する方法 Amapで相手の携帯電話の位置を確認する方法 - Amapで相手の携帯電話の位置を確認する方法 Apr 01, 2024 pm 02:11 PM

1. クリックして携帯電話の Amap 地図ソフトウェアに入ります。 2. 右下隅の「My」をクリックします。 3. をクリックしてファミリーマップを入力します。 4. 「マイファミリーマップの作成」をクリックします。 5. 作成が成功すると、招待コードが表示され、別の携帯電話と共有できます。

Go言語開発におけるメモリリーク箇所の問題を解決する方法 Go言語開発におけるメモリリーク箇所の問題を解決する方法 Jul 01, 2023 pm 12:33 PM

Go 言語開発におけるメモリ リークの場所の問題を解決する方法: メモリ リークは、プログラム開発における一般的な問題の 1 つです。 Go 言語の開発では、自動ガベージ コレクション機構の存在により、他の言語に比べてメモリ リークの問題が少ない可能性があります。ただし、大規模で複雑なアプリケーションに直面すると、依然としてメモリ リークが発生する可能性があります。この記事では、Go 言語開発におけるメモリ リークの問題を特定して解決するための一般的な方法をいくつか紹介します。まず、メモリ リークとは何かを理解する必要があります。簡単に言えば、メモリリークとは、

See all articles