JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:33 PM

1. 需要

画像をクリックすると拡大画像が表示され、拡大画像をクリックすると非表示になります。モバイル画面は小さいため、大きな画像を表示する必要がある場合があるため、主にモバイルデバイスで使用されます。

2. コード

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head runat="server">
<title>JQuery点击图片查看大图by starof</title>
<style type="text/css">
.exampleImg { height:100px; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//alert($);
// (function (window, undefined) {
// var MyJQuery = function () {
// window.MyjQuery = window.$ = jQuery; window.$ = MyJQuery;
// };
// })(window);
// alert($);
$.fn.ImgZoomIn = function () {
bgstr = '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';
//alert($(this).attr('src'));
imgstr = '<img  class="exampleImg lazy"  src="/static/imghwm/default1.png"  data-src="images/03.jpg"  id="ImgZoomInImage" + $(this).attr('src')+'" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide();   style="max-width:90%" / alt="JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide_javascriptスキル" >';
if ($('#ImgZoomInBG').length < 1) {
$('body').append(bgstr);
}
if ($('#ImgZoomInImage').length < 1) {
$('body').append(imgstr);
}
else {
$('#ImgZoomInImage').attr('src', $(this).attr('src'));
}
//alert($(window).scrollLeft());
//alert( $(window).scrollTop());
$('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);
$('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
$('#ImgZoomInBG').show();
$('#ImgZoomInImage').show();
};
$(document).ready(function () {
$("#imgTest").bind("click", function () {
$(this).ImgZoomIn();
});
});
</script>
</head>
<body>
<div>
<!--第一种写法-->
<img  class="exampleImg lazy"  src="/static/imghwm/default1.png"  data-src="images/03.jpg"  id="imgTest"/ alt="JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide_javascriptスキル" >
<!--第二种写法-->
<img  class="exampleImg lazy"  src="/static/imghwm/default1.png"  data-src="images/p1_nav2.png"  onClick="$(this).ImgZoomIn();"/ alt="JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide_javascriptスキル" >
</div>
</body>
</html>

3. スキル

モバイル端末はホットスポットを追加できないため、最終的な解決策は、4 つの a タグを使用して左上隅、右上隅、左下隅、右下隅を見つけることです。

<dl>
 <dd style="display:block;">
  <img  src="/static/imghwm/default1.png"  data-src="images/four-duche.jpg"  class="lazy" onClick="$(this).ImgZoomIn();" alt="JavaScriptをベースにしており、携帯端末では画像をクリックすると大きな画像が表示されます。 Hide_javascriptスキル" >
  <a href="javascript:;" src="images/11.jpg" class="topleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/12.jpg" class="topright" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/13.jpg" class="bottomleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/14.jpg" class="bottomright" onClick="$(this).ImgZoomIn();"></a>
 </dd>
 ...
</dl>
css
.topleft,.topright,.bottomleft,.bottomright{
 width:50%;
 height:50%;
 position:absolute;
}
.topleft{
 /*background-color:red;*/
 top:0;
 left:0;
}
.topright{
 /*background-color:green;*/
 top:0;
 right:0;
}
.bottomleft{
 /*background-color:blue;*/
 bottom:0;
 left:0;
}
.bottomright{
 /*background-color:yellow;*/
 bottom:0;
 right:0;
}

PS: モバイル Web サイトのモバイル画像は遅延読み込みを実装しています

国内通信ネットワークの費用対効果の限界と携帯電話の処理能力の違いにより、無線アプリケーションを設計する際には、

ユーザーのトラフィックを節約することは非常に重要な考慮事項です。おそらく、すべてのバイトをクライアント用に保存する必要があります。

トラフィックの節約では、次の側面に重点を置くことができます:

1. ブラウザのローカルストレージを使用するなど、キャッシュを使用します。

2. 遅延読み込みコード (底部検出、インターフェースを介したデータ取得)

3. リソースの遅延ロード。画像が表示領域に表示されてからロードされ、(自動再生を考慮せずに) ユーザーのクリックに応じてオーディオとビデオがロードされます。

今日は画像の遅延読み込みを実装する方法について簡単に説明します。

jQuery および jQuery mobile に基づく例

原則: ユーザーが画面をスライドすると、画面のスクロールが終了し (jQuery が提供するウィンドウのスクロールストップイベントを適切に使用します)、ビューポートに表示される画像を検出します。

画像の実際の src 属性を置き換えるだけです。

ヒント: スクロール直後に読み込みを検出しないでください。1 秒の遅延を設定します。現在のネットワーク環境に基づいて、1 秒の遅延はユーザーが本当に望んでいることを示している可能性があります。コンテンツを表示します。 WeChatを使っている友達はこれをじっくり体験することができます。

時計制御により、ユーザーが頻繁に素早く画面を反転すると、大量のリクエストが発行されなくなります。

メインコード:

var refreshTimer = null,
 mebook = mebook || {};
/*
*滚动结束 屏幕静止一秒后检测哪些图片出现在viewport中
*和PC端不同 由于无线速度限制 和手机运算能力的差异 1秒钟的延迟对手机端的用户来说可以忍受
*/
$(window).on('scrollstop', function () {
 if (refreshTimer) {
 clearTimeout(refreshTimer);
 refreshTimer = null;
 }
 refreshTimer = setTimeout(refreshAll, 1e3);
});
$.belowthefold = function (element) {
  var fold = $(window).height() + $(window).scrollTop();
  return fold <= $(element).offset().top;
};
$.abovethetop = function (element) {
  var top = $(window).scrollTop();
  return top >= $(element).offset().top + $(element).height();
};
/*
*判断元素是否出现在viewport中 依赖于上两个扩展方法 
*/
$.inViewport = function (element) {
  return !$.belowthefold(element) && !$.abovethetop(element)
};
mebook.getInViewportList = function () {
  var list = $('#bookList li'),
    ret = [];
  list.each(function (i) {
    var li = list.eq(i);
    if ($.inViewport(li)) {
      mebook.loadImg(li);
    }
  });
};
mebook.loadImg = function (li) {
  if (li.find('img[_src]').length) {
    var img = li.find('img[_src]'),
      src = img.attr('_src');
    img.attr('src', src).load(function () {
      img.removeAttr('_src');
    });
  }
};

声明

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

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

SublimeText3 中国語版

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

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、