-2
最近jsとcssに興味を持ち、jsfiddleでいくつかの素晴らしい例を探しました。html/css/js noob：jsfiddleの例をエクスポートするには
例をHDに「エクスポート」する方法はありますか？私はちょうどそれらを保存し、それらを実行可能にする管理できません。明らかにちょうど&貼り付けdoesnt仕事をコピーしてください。私は、この特定の例を変更する方法が必要なのか：http://jsfiddle.net/MvFx9/
test.htmlという
<html>
<head>
<link href='grid-overlay.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="grid-source"><img src="http://www.google.com/images/logos/ps_logo2.png"></div>
<script src="grid-overlay.js"></script>
</body>
</html>
グリッドoverlay.css：
#grid-source {
position: absolute;
}
#grid-overlay {
position: relative;
}
.hover {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.unselected {
background-color: rgba(0, 0, 0, 0.5);
}
.selected {
background-color: none;
}
グリッドoverlay.js
var $src = $('#grid-source');
var $wrap = $('<div id="grid-overlay"></div>');
var $gsize = 10;
var $cols = Math.ceil($src.find('img').innerWidth()/$gsize);
var $rows = Math.ceil($src.find('img').innerHeight()/$gsize);
// create overlay
var $tbl = $('<table></table>');
for (var y = 1; y <= $rows; y++) {
var $tr = $('<tr></tr>');
for (var x = 1; x <= $cols; x++) {
var $td = $('<td></td>');
$td.css('width', $gsize + 'px').css('height', $gsize + 'px');
$td.addClass('unselected');
$tr.append($td);
}
$tbl.append($tr);
}
$src.css('width', $cols * $gsize + 'px').css('height', $rows * $gsize + 'px')
// attach overlay
$wrap.append($tbl);
$src.after($wrap);
$('#grid-overlay td').hover(function() {
$(this).toggleClass('hover');
});
$('#grid-overlay td').click(function() {
$(this).toggleClass('selected').toggleClass('unselected');
});
Googleのロゴが表示されますが、それだけです。スクリプトからの応答はありません。
申し訳ありませんヘッド部に入れて '同様の質問' に表示さdid't。実際にそれは私の質問に答える...しかし、私はもうそれを削除することはできません –