とんぺーのミスコンにエントリーした気分になれるブックマークレットつくった

Oct 7, 2014  

使い方

1.幅140px高さ260pxの画像を用意する。

2.画像のURLをこのテキストボックスに入れる。

3.このリンクを右クリックしてブックマーク
学祭ミスコン ブックマークレット

4.コンテストの公式ページに行く
第6回Mr.&Ms.東北大コンテスト
http://www.festa-tohoku.org/program/contest/contest.html

5.先ほどのブックマークを開く!
5人目のミス候補が現れます。

マウスを画像にのせたときの白いオーバーレイは実装しましたが、
名前やNo.5の記述は省略しました。
以下に元のコードを載せるので、誰かやって!


var imgurl = ‘ms1.jpg’;
var msul = $(‘ul’).eq(1);
msul.children().attr(‘style’,‘margin-right:25px;‘);
var newms = $(’<li>’);
newms.css({
    ‘position’:‘relative’,
    ‘float’:‘left’,
    ‘width’:‘150px’,
    ‘height’:‘270px’,
    ‘background-image’:‘-moz-linear-gradient(top,#931f20,#f29d80 50%,#931f20)’
});
newms.css(‘background-image’,‘-webkit-gradient(linear,left top,left bottom,from(#931f20),color-stop(0.5, #f29d80),to(#931f20))’);
var msimg = $(’<img>’);
msimg.attr(‘src’,imgurl);
msimg.css({
    ‘position’:‘absolute’,
    ‘top’:‘5px’,
    ‘left’:‘5px’,
});
newms.append(msimg);
var overlay = $(’<div>’);
overlay.css({
    ‘position’:‘absolute’,
    ‘top’:‘4px’,
    ‘left’:‘4px’,
    ‘width’:‘142px’,
    ‘z-index’:‘100’,
    ‘height’:‘262px’,
    ‘background’:‘rgba(255,255,255,0.15)’
});
overlay.hide();
newms.append(overlay);
newms.hover(
    function(){
        overlay.show();
    },
    function(){
        overlay.hide();
    }
);
msul.append(newms);

コードが書けたら以下のページで適当な形に変換すれば、
ブックマークレット化できます。
bookmarklet maker
http://userjs.up.seesaa.net/js/bookmarklet.html

このエントリーをはてなブックマークに追加