別のjQueryピクセル間レイアウトプラグイン

私はこのプラグインを今年の2月に自分用に書き始めました。その時点では似たようなものが見つからなかったからです。 現在、habrayuzerはPixelPerfectやX-Preciseなどのツールをすでに知っていますが、それぞれに長所と短所があります。



では、pixLayoutの何がそんなに特別なのでしょうか？

• すべて1つのファイルに。 プラグインファイルの後にjQueryを接続して実行すると、すべてが機能します。 スタイルとhtmlはすでに含まれています。
• ブラウザー間の互換性。 pixLayoutはchrome 5 +、opera 10 +、firefox 3.6 +、IE 7+ブラウザー（軽微な不具合はありますが、それでも動作します）、および1.3.2以降のすべてのjQueryバージョンで動作します
• 機能性 プラグインは、セットアップとその後のレイアウトを簡単にするために十分なパラメーターを提供します。

インストールおよび構成方法

1.3.2から始まる便利なバージョンのjQueryを接続し、pixLayoutを接続して、以前に作成したレイアウト画像へのパスを割り当てます。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.pixlayout.js"></script> <script type="text/javascript"> $(function(){ $.pixlayout("/path_to_picture/picture.ext"); }); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに微調整するために、オブジェクトを渡し、2番目のパラメーターとしてコンテキストを指定します。

 $.pixlayout({ src: "/img/layout.jpg", opacity: 0.8, top: 50, center: true, clip: true, show: true }, ".wrapper");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウェブサイトとデモ

別のデモ



標準の「w」、「a」、「s」、「d」、矢印などのホットキーで画像レイヤーを制御すると便利です。 また、一番上の行の数字をクリックすると、ピクセル単位の「ステップ」がその値に等しく設定されます。 例：5をクリック-ステップは5ピクセルになります。 Shift + eで画像を非表示および表示できます。

コントロールパネルは固定および取り外し可能です。 ドキュメントの右上隅にカーソルを合わせると、切り離された状態で画面に表示されます。

動きに加えて、パネル上のボタンを1つ押すことで画像レイヤーを中央に配置し、「位置」プロパティを「固定」に、またはその逆を「絶対」に変更できます。



プロセスを説明する短いビデオがあります：