pixelperfect’s DEMO

左上のアイコンをクリックすると。。。

This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO. This is pixelperfect’s DEMO.

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/pixel-perfect.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/pixel-perfect.js"></script>
<script>
    $(window).load(function(){
		pixelperfect.init( {
			image: '[jplugin]/layout/pixelperfect/images/pixelperfectDemo.png',
			opacity: .3
		});
    });
</script>
<div id="pixelperfectDemo">
	<p class="title">pixelperfect's DEMO</p>
	<p class="description">左上のアイコンをクリックすると。。。</p>
	<p>This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO.
		This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO.
	This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO.
		This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO.
	This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO. This is pixelperfect's DEMO.</p>

	<button id="pixelperfectBtn02" class="red">stop</button>
</div>

<button id="pixelperfectBtn01" class="yellow">start</button>

pixelperfectについて

pixelperfectは、デザインデータと実際のhtmlのずれを視覚的に表示してくれるプラグインです。 htmlコーディングの際に、ピクセル単位のズレを簡単に微調整できるので、おすすめです
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ