問題タブ [zoomooz]

zoomooz + jquery.mouse.wheel および jquery.kinetic.js を使用して、フォーム デザイナーで無料のドラッグ/スクロール機能にズームを実装しようとしています。この機能のデモは次のとおりです: http://jsfiddle.net/mVf8Z/

私の問題は次のとおりです。

1. 「リセット」ボタンで元の状態に戻すことはできません。コンテナをズームインし、ビューポートの右上に少し移動します

2. マウスホイールを使用してコンテナー内をズームすると、コンテナーはズームインできますが、常にビューポートの右上隅に移動します。

私のコードが間違っている場所はありますか?

アップデート

追加のレイヤーを追加した後、シフト アウェイの問題が解決されたようです。 http://jsfiddle.net/mVf8Z/3/を確認してください。ただし、まだ 2 つの問題があります。

1. jquery.kinetic ドラッグ/スクロールを使用して、予期されるビュー ポートにページをスクロールできません。これは、ズームインが発生する前に問題ありません

2. リセットボタンをクリックしても元の状態に戻らず、少しズームアウトします。

更新 2

最終的に、zynga scroller (http://zynga.github.com/scroller/) に基づくソリューションにたどり着きました。ここにフィドルがあります: http://jsfiddle.net/mVf8Z/5/。このソリューションの問題は、zoomooz と比較してズームイン効果がひどいことです。https://github.com/zynga/scroller/issues/28で zynga に問題を提出しました。

テキストを含む HTML テーブルをズームしたいと思います。ズームに最適なツールである zoomooz を使用しています。

http://janne.aukia.com/zoomooz/

私が直面している問題は、フォントもズームされているため、同じコンテンツが大きく表示されることです。ズームしたり、テキストを折り返したりしたときに、より多くのコンテンツを表示したい. おそらくあなたは私が何を意味するか知っています。

これをチェックアウトしましたが、ターゲット div に適用しても効果がないようです:

-webkit-text-size-adjust: なし;

ありがとうエンジェル

私は心理学の研究プロジェクトを行っているので、JavaScript の初心者です。それでも、私はこれを成し遂げなければならず、それは非常に具体的です。

ページの要素 (本の表紙) をクリックしてズームし、同時にその横に余分なコンテンツ (テキスト) を開き、外に出られるようにしたい (テキストを閉じて元に戻す) ) ワンクリックで。

これまでのところ、 zoomooz.jsを使用してズーム部分を簡単にすることができ、残りは jQuery を使用して取得しました。私の本の表紙とテキスト ページ (それぞれ 1 つの div) は、より大きな div (「コンテナー」) 内で互いに重なり合っています。コンテナーをクリックすると、カバーとテキストがアニメーション化されます。一方は左側に移動し、もう一方は右側に移動します。コンテナーからクリックして出て stopPropagation を使用すると、それらは途中で元に戻り、計画どおりカバーの後ろにテキストを隠します。

今私の問題は、divのアニメーション化中にzoomoozを使用しようとすると、それらが競合することです。ズームインは問題なく機能します。ズームとアニメーションを同時に行うことができます。しかし、途中でズームアウトすると、それらを一緒に動作させることができません。Zoomoozが引き継ぎます。zoomooz を手でコーディングしようとしましたが、何をしているのかわかりません。どこかで「stopPropagation」に関係しているように感じます。

ここに私のモックアップ/テストページがあります。すべてが含まれており、物事をより明確にする必要があります. 誰かが私に手を差し伸べてくれたらとても嬉しいです。本当にありがとう。

zoomooz.js スクリプトを使用する場合、ターゲットのズームを有効にするには、単純に zoomTarget クラスを追加します。

元。<div id="container" class="zoomTarget"></div>

ただし、ズームは「コンテナ」をクリックした場合にのみ発生します。ブラウザ ウィンドウのサイズが変更されると、ターゲットの「コンテナ」に自動的にズームする方法はありますか?

もしかしてみたいな$(window).resize(function(){ $("#container").zoomTarget(); });？

ズーム可能な div 要素のグリッドがあります。div をクリックすると、 Zoomooz.jsを使用してズーム、スケーリング、および中央揃えが行われます。各 div 内には、Raphäelを使用して実装された描画可能な領域 (Canvas など) があります。

私の問題は、ズーム機能が完全に機能していても、div のスケーリングにより、div が拡大され、幅/高さが大きくなるだけでなく、div に合理的に描画できないことです。ズーム効果が本当に欲しいのですが、divをスケーリングする代わりに、すべてのdivを変換し、選択したdivをイージング効果などを使用して中央に配置したいと思います。

どんな提案でも大歓迎です！

自分のサイトに地図を表示しています。メインディビジョンの背景には地図画像が設定されています。このマップ上にグリッドオーバーレイ（透明なpng）があります。

私はzoomooz（http://janne.aukia.com/zoomooz/）を使用して、地図上のさまざまな関心領域にズームインしています。

現在、地図とオーバーレイの両方を拡大すると、ズームインします。地図のみを拡大し、グリッドを一定のサイズに保つことを目指しています。

オーバーレイの位置を固定するように設定しましたが、それでもすべてが一緒にズームしているようです。

次のフィドルでクリック時にアニメーションを実装しようとしています: My Fiddle

Zoomooz js プラグインをフィドルに外部から追加しましたが、ドアが閉じた後のアニメーションに遅延の問題があるようです。(Firefox のみ。)

私のFirefoxのバージョンは26.0、Mozilla Firefox for ubuntu canonical 1.0です。

更新：ドアの問題だけではありません.firefoxはZoomoozを拾い、firefoxでは非常に遅いです.

ドキュメントによると、zoomooz jquery スクリプトを使用してコンテナー内をズームできるはずです。

これは私のコードです:

本文内容:

ただし、ズームすると、ページ全体の div をズームする (ページに合わせて十分に小さくする) 代わりに、ビューポートを含むすべてがズームされます。

なぜ？