jfMagnifyを使ってWebページに拡大効果を追加する

たくさんあります 無料ズームプラグイン それは信じられないほどうまくいっています。しかし、これらのほとんどは 画像用に構築された そしてそれらは方向を指定します 画像のみのコンテンツ.

できたら 拡大効果を加える あなたのWebページのあらゆる部分に？ありがとう jfMagnify, あなたはできる.

それは 無料のjQueryプラグイン 画像のズーミングだけでなく、 ページ全体のズーム. それはまたあなたを可能にするいくつかのプラグインの一つです。 倍率を選択してください そして タッチイベントをサポート モバイルユーザー向け.

このプラグインはちょっと重い感じがするので注意してください 2つの依存関係に依存している： 通常のjQuery そして jQueryのUI. これらは両方ともjfMagnifyを正しく動作させるために必要です。言うまでもありません 実際のjfMagnifyスクリプト あなたはあなたのページに含める必要があるでしょう.

あなたは拡大された要素だけをターゲットにできるのでセットアップは少しトリッキーです。 コンテナ内. ページ全体をターゲットにしたい場合は、 Webサイト全体のクラスを含める.

これが 単一行のjQuery ようになります：

 $（ "。magnify"）。jfMagnify（）; 

このターゲット 内のすべての要素 .拡大する 容器 これは通常です div 素子.

これらの内部要素はイメージですが、 小さな文字を含む, たとえば、サイトの利用規約やプライバシーポリシーのページなどです。すべてのドキュメントは GitHubリポジトリで入手可能, 一度設定すれば、全体のプロセスがずっと簡単になります。.

また、このプラグインはとても気まぐれで付属しています たくさんのコンテナルール. たとえば、コンテナ要素 静的なCSS位置を持つことはできません, そのため、相対、絶対、または固定のいずれかである必要があります。.

あなたはできる すべてのデフォルトスタイルルールを見つける GitHubリポジトリにはありますが、あなたのレイアウトが既に構築され実行されている場合はカスタマイズするのが面倒かもしれません。私にとって、jfMagnifyの利点は努力する価値があります。本当に、それはあなたのニーズとあなたがインターフェースを好むかどうかに依存します.

あなたがどう思うかを見るためにGitHubのドキュメントを覗いてください。そして、あなたもできます インターフェースをプレビューする インストールする前にライブラリが動作しているのを確認したい場合はCodePenで.