SQLの窓

2018年01月18日


jQuery でページを 50% に縮小するブックマークレット(2回目の実行は80%)


( Chrome と Firefox と IE で動作確認しました )
IE は、関数のデフォルト記述をできないので、scale_start の呼び出しに必ず引数が必要です。もし省略による値設定が必要な場合は、arguments.length と arguments[0] が必要になると思います

拡大する場合は、 transformOrigin を実行しておかないと、ページの中央にで拡大されてしまって左端が見えなくなります( デフォルトが 50% 50% なので )
縮小だけならばブラウザの縮小で対応できますが、ブラウザの場合元に戻すのが少し面倒なので、リロードで100% に戻せます。 1回目は外部 JavaScript の中のデフォルトとして 50% で縮小し、2回目は 80% で縮小するようにしました。 80% の指定は、ブックマークレットのコードの最後にある 0.8 を変更すると自由にカスタマイズできます。 リンクの href に埋め込まれたコード
javascript:if(!window['_bIScale']){window._bIScale={};(function(w,h,b,l,t,z,v){var wnd=document.createElement('iframe');with(wnd){id='myScale';frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v;border='solid 1px #000';borderRadius='10px';}}document.body.appendChild(wnd);window._bIScale.wnd=wnd;var%20url;url='https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js';wnd.contentWindow.document.write('<'+'script src=\''+url+'\' charset=\'utf-8\'></'+'script>');})(0,600,1,'0px','0px',1000,'');}else{document.getElementById('myScale').contentWindow.scale_start(0.8);}

整形したコード
javascript: if (!window['_bIScale']) {
    window._bIScale = {}; (function(w, h, b, l, t, z, v) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            id = 'myScale';
            frameBorder = b;
            width = w;
            height = h;
            with(style) {
                position = 'absolute';
                left = l;
                top = t;
                zIndex = z;
                display = v;
                border = 'solid 1px #000';
                borderRadius = '10px';
            }
        }
        document.body.appendChild(wnd);
        window._bIScale.wnd = wnd;
        var % 20url;
        url = 'https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js';
        wnd.contentWindow.document.write('&lt;' + 'script src=''+url+'' charset='utf - 8 '&gt;&lt;/' + 'script&gt;');
    })(0, 600, 1, '0px', '0px', 1000, '');
} else {
    document.getElementById('myScale').contentWindow.scale_start(0.8);
}



ブックマークレットに関する記事
関連する記事

▼ ブックマークレットから呼び出している js ファイルの内容
str="";
str+="<"+"script> \n";
str+="if ( window.addEventListener ) { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; \n";
str+="} \n";
str+="else { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; \n";
str+="} \n";
str+="document.write(\"<\"+\"script src=\\\"\" + window[window.location.hostname+'.loadjQuery'] + \"\\\"></\"+\"script>\"); \n";
str+="</"+"script> \n";
document.write(str);
function scale_start(scale) {
	$(parent.document.body).css({ transformOrigin: '50% 0' });
	$({"scale": 1}).animate(
		{"scale": scale},
		{
			duration: 1000,
			easing: "swing",
			step: function(now) {
				$(parent.document.body).css({
					transform: 'scale(' + now + ')'
				});
			}
		}
	);
}
str="";
str+="<"+"script> \n";
str+="scale_start(0.5); \n";
str+="</"+"script> \n";
document.write(str);
document.close();

※ transformOrigin を実行しておかないと、ページの中央に向かって縮小されてしまいます( デフォルトが 50% 50% なので )


【ブックマークレットの最新記事】
posted by lightbox at 2018-01-18 14:38 | ブックマークレット | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり