SQLの窓 イラストAC フリー素材

2015年06月19日

ジョークブックマークレット : ページの回転 ( jQuery アニメーション )

Twitter は既に jQuery が使われているので、以下の比較的単純なブックマークレットで回転します。
( 一般ページ用ではエラーになります )
▼ ブックマークレット登録用リンクです。
Twitter 用ページ回転
javascript:jQuery({kakudo: 0}).animate({kakudo:360},{duration:3000,easing:'swing',step:function(now){jQuery(document.body).css({transform:'rotate('+now+'deg)'});}});



▼ 一般ページ用ブックマークレット登録用リンクです。
ページ回転

新たに、回転中に CTRL キーを押すと、回転の中心をブラウザの見えている部分の一番上(スクロールバーが一番上)の中心に変更するようにしました。

jQuery の回転アニメーション をページ対象で、ブッマークレットに仕込みました。何の役にも立ちませんが、こういうことが簡単にできる時代ではあります。
▼ jquery_joke_01.js
str="";
str+="<"+"script> \n";
str+="if ( window.addEventListener ) { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; \n";
str+="} \n";
str+="else { \n";
str+="	window[window.location.hostname+'.loadjQuery'] = '//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 joke_start() {
	$({kakudo: 0}).animate(
		{kakudo: 360},
		{
			duration: 3000,
			easing: "swing",
			step: function(now) {
				$(parent.document.body).css({
					transform: 'rotate(' + now + 'deg)'
				});
			}
		}
	);
}
str="";
str+="<"+"script> \n";
str+="joke_start(); \n";
str+="$(parent).keydown(function(event){ \n";
str+="	if ( event.ctrlKey ) { \n";
str+="		console.log(event) \n";
str+="		$(parent.document.body).css({ transformOrigin: '50% ' + parent.document.documentElement.clientHeight/2 + 'px' }); \n";
str+="	} \n";
str+="}); \n";
str+=" ";
str+="</"+"script> \n";
document.write(str);
document.close();

とりあえず、Google Chrome、Firefox、IE11( IE10エミュレーション ) では動作しました。

う〜〜〜ん。

Facebook は回りません(セキュリティチェックが入っています)でした。あと、昔のフレームページもダメでした。
Google とかは機嫌よく回ってます。ただ、どうやら非力な PC ではイマイチアニメーションにならないようです。

▼ ブックマークレット部分の整形したもの
if (!window['_bI']) {
    window._bI = {}; (function(w, h, b, l, t, z, v) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            id = 'my';
            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._bI.wnd = wnd;
        var % 20url;
        if ((location.href).substr(0, 5) == 'https') {
            url = 'https://secure624.sakura.ne.jp/fire30.winofsql.jp/jquery_joke_01.js';
        } else {
            url = 'http://toolbox.winofsql.jp/jquery_joke_01.js';
        }
        wnd.contentWindow.document.write('<' + 'script src=\'' + url + '\' charset=\'utf-8\'></' + 'script>');
    })(0, 600, 1, '0px', '0px', 1000, '');
} else {
    document.getElementById('my').contentWindow.joke_start();
}
関連する記事


posted by at 2015-06-19 13:37 | ブックマークレット | このブログの読者になる | 更新情報をチェックする