Question

我最近对js和css感兴趣，并在jsfiddle上查了一些很好的例子。

有没有办法将示例“导出”到我的HD？我只是设法保存它们并使它们可以运行。显然只是复制和放大。粘贴不起作用。我如何修改此特定示例：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');
});

谷歌徽标出现了，但就是这样。脚本没有回复。

Answer 1

您缺少jquery链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

把它放到头部

html / css / js noob：如何导出jsfiddle示例

1 个答案: