• HTML+Css+transformを使った3Dナビゲーションバーのサンプルコード

    3Dはthree-dimensionalの略で、立体的なグラフィックスという意味です。コンピュータで3Dグラフィックスを表示するということは、平面で3Dグラフィックスを表示するということです。現実世界と違って、本当の3次元空間は、現実の距離空間があります。コンピューターは現実の世界にしか見えないので、コンピューターで表示する3Dグラフィックスは、人間の目で見て本物に見えるようにすることなのです。

    2022-01-21 01:28:40
  • 人気のあるいくつかのHTML5 UIフレームワークの比較(要約)

    モバイルHTML5開発では、そのほとんどが既存のフレームワークを使用していますが、ここではいくつかの人気のあるUIフレームワークを簡単に比較しています。筆者はいくつかの人気のあるHTML5フレームワークを比較しています。個人的な意見です。 (1) MUI のURLです。 http://dev.dcloud.net.cn/mui 長所。MUIは、デジタルdcloundによって

    2022-01-15 22:29:24
  • 中国語の文字にピンインを追加してコンポーネントを折りたたみ、展開するためのHTML5コード

    HTMLの仕様はW3CとWHATWGの共同作業で作られており、HTML5も例外ではありません。中でも W3Cとはワールドワイドウェブコンソーシアムのこと WHATWGとは、Web Hypertext Application Technology Working Group(ウェブ・ハイパーテキスト・アプリケーション技術ワーキンググループ)のことです。 "共同出力"といういい

    2022-01-14 23:50:41
  • html5動画の共通APIインタフェースの実例を紹介

    I. 属性にはboolean型のものもありますが、エラーを避けるためにXHTML(属性名="属性値")形式で記述することをお勧めします(以下の太字の属性は一般的な属性です)。 <テーブル 属性 値 機能説明 コントロール コントロールズ 再生コントロールの表示の有無 オートプレイ オートプレイ ブラウザを開いた後に自動

    2022-01-14 23:23:42
  • html2canvasを使ってcanvasにhtmlの内容を書き込んで画像を生成する方法

    前回は、canvas の基本的な使い方を簡単に説明しましたが、今回は、canvas に html の内容を記述して画像を生成する方法を説明します。 html2canvasの公式サイトです。 http://html2canvas.hertzen.com I: html2canvas プラグインをダウンロードする 1: html2canvas プラグインを直接ダウンロードする。 html2ca

    2022-01-14 23:07:10
  • Html5ポジショニングの究極のソリューション

    背景 新会社への2つ目のプロジェクトは、WeChat内を中心に、他のブラウザも考慮したH5モールを小さなパートナーたちと作ることです。中でもホームページは、現在のユーザーの緯度・経度から最も近い店舗を探し出し、表示する必要があります。フロントエンドが行うべき作業は、ユーザーの緯度と経度を取得し、バックグラウンド・インターフェースに問い合わせ、ページをレンダリングすることです。

    2022-01-14 22:43:17
  • iPhoneXの画面適応 WeChatアプリとH5でセーフエリア下部の小さな黒いバー

    最近、アプリを書くときにiPhoneXの下部の小さな黒い線がコンテンツに重なる問題に遭遇しましたが、実はこれ、iPhoneXのセーフエリアの適応なんです。 前置き Apple iPhone X , iPhone XR などでは、物理的なホームボタンが廃止され、ホームボタン機能の代わりに下部に小さな黒いバーが表示されていることが確認できます。WeChatアプレットやh5ページは

    2022-01-14 22:29:32
  • モバイルやWeChatでHTML5の音声が自動再生されない問題を解決。

    H5ページを再度行ったところ、モバイル側とWeChat側で自動再生を追加しても音声が自動再生されないことがわかりました。 通常の解決策は、インタラクティブなイベントを与えることです。 タグを使用します。 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto"> audio属性はこの

    2022-01-14 21:33:38
  • VSCodeカスタムhtml5テンプレート実装

    (a) 新しいhtmlショートカット VSCodeで新規にhtmlコードを作成する場合、「!」を入力し、EnterまたはTabで以下のようなhtmlファイルのテンプレートが自動生成されます。  (ii) カスタムhtml5テンプレート しかし、毎回新しいhtmlテンプレートを作成するのは、いつも単調に感じてしまいます。例えば、Vueを自動的に導入して、

    2022-01-14 21:33:33
  • canvasを用いたキャプチャ表示の実装

    最近、削除ボタンをクリックすると、削除を確認するためにキャプチャを入力させるポップアップボックスが表示される、という小さな要件を作りました。 では、バックエンドから取得したキャプチャをどのように表示し、ユーザーが入力できるようにするのでしょうか。要件を理解したとき、バックエンドがユーザーの携帯電話に直接コードを送って入力させるのかと思ったのですが、そうではなく、私が誤解していたようです。

    2022-01-14 20:16:21
  • Html5 video タグ 動画のベストプラクティス

    4Gの普及やWiFiの普及により、携帯電話のインターネット速度は安定して高く、動画を使ったHTML5が一般的になりつつあり、フレームアニメーションよりも動画の方が表現力が豊かになっています。 ビデオの属性 <video id="video" src="video.mp4" controls = "true" poster="images.jpg"

    2022-01-14 20:09:19
  • HTML5でオプションのスタイルシートを使ってWebサイトやアプリケーションにダークモードを追加する方法を解説

    サイトへのダークモードの追加 ダークモードは、Twitter、Instagram、WhatsApp、YouTubeなど、すでに多くの人気Webサイトやアプリで採用されています。しかし、自分のウェブサイトにこのパターンを追加するにはどうすればよいのでしょうか? 私は以前から、ウェブサイトのダイナミックなカラーテーマ切り替え機能の大ファンです。好きなカラーテーマを選べるので、ユー

    2022-01-14 19:42:08
  • postMessageを用いたiframeのクロスドメイン実装について

    ドメインB.comが提供するページサービスをドメインA.comで利用したい場合、直感的に実装できる方法はiframeを利用することです。しかし、iframeでの直接対話には **クロスドメイン問題** があり、これを解決する方法は2つあります。1つは、直接ドメインBを指して、直接クロスドメインを殺し、指定された転送ルールを設定するには、ドメイン上のnginxプロキシ転送、nginxを使用するには、

    2022-01-14 18:25:16
  • divやimgの画像の高さを幅に合わせる方法

    この方法は主にサイトの適応性を高めるために使用されますが、画像を読み込んだ後にコンテンツの高さを保持し、ページのスクロールを回避するためにも実装することが可能です。 I. 画像の幅をjsで決定して特定の値を取得し、jsで画像の高さを設定することができます(ここでは詳しく説明しません)。 jsを使うデメリットとしては、画像の高さを調整できるのはページ更新時のみで、ブラウザのウィンド

    2022-01-14 18:16:33
  • iframeタグが入れ子になっている問題の解決法

    問題の説明 バックエンドの管理システムにeasyuiを使用する場合、ツリーコンポーネントを使用してツリーメニューを実装し、該当メニューをクリックするたびに、それが第一階層のメニューであるかどうか、またURLの有無から既に存在するかどうかを判断しています。 data = pd.read_excel('shop_address.xlsx', sheet_name='uniqlo'

    2022-01-14 18:01:04
  • html2canvasのスクリーンショットが空白になる問題の解決法

    最近、あるプロジェクトでWebスクリーンショット機能を提供する要件に出くわしました。Baiduはhtml2canvasがうまく機能することを発見しました。そこで、試してみることにしました。 でリソースをダウンロードします。 プラグインのダウンロードアドレスです。 html2canvasダウンロードアドレス 使用方法 プロジェクトで使用されているrea

    2022-01-14 17:50:14
  • html5でtype="range "属性のスライダー機能を実装する。

    html5のtype="range"属性によるスライダー機能。 1. html5では、スライダーに関するタグが追加され、実際にはinputタグを拡張し、type属性の値をrangeとします。 2. 面白いので、スライダーのアニメーションの例を作ってみました。動画の自動再生と一時停止にやや似ていますが、開始ボタンと終了ボタンでスライダーのスライドと停止をコントロールしながら、その時のス

    2022-01-14 16:26:05
  • キャンバスを使ってWeChatアバターなしの招待状ポスターを生成する

    私は最近、WeChatの中でアクセス可能なH5のページを作り、長押しで画像を共有するために友人の招待ポスター、オンライン検索情報を送信するために、解決策を思い付いた、画像を生成するためにページを描画するためにキャンバスを使用してください。     問題:キャンバスの画像がクロスドメインになる。     解決プロセス(空白を埋

    2022-01-14 15:45:59
  • postMessageを用いたiframeのクロスドメイン通信問題の詳細な解決法

    今週は頭の痛いことに遭遇しました。別のサードパーティのウェブプロジェクトを私のウェブプロジェクトに組み込みたかったのです。最初に思いついたのはiframeを使うことでしたが、問題はサードパーティのウェブプロジェクトとやりとりすることで、同一生成元ポリシーに違反すること、そしてクロスドメインの問題に対処することが最大の頭痛の種でした。 要件は、私のページでいくつかのボタンをクリックし、リアル

    2022-01-14 15:06:03
  • html5 地図の現在位置の矢印の作り方の例

    機能ポイント 現在の位置の取得 現在のデバイスの向きを常時表示する ハイライト h5を開くたびに、単純に取得したデバイスの向きが正しく表示されない。これは、開くたびにマップ自体がデバイスの向きに影響されるためです。 そのため、コンパスの向きを再度取得して修正する必要があります。 アプレットがデバイス、コンパスの方向を取得し、h5が位置決め矢印をレン

    2022-01-14 15:01:59