スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

使い方

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 = $('
  • ');
    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 = $('');
    msimg.attr('src',imgurl);
    msimg.css({
    'position':'absolute',
    'top':'5px',
    'left':'5px',
    });
    newms.append(msimg);
    var overlay = $('
    ');
    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
    スポンサーサイト
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。