1

我有兴趣使用这个MosaicJS 插件。说明看起来很简单，所以我尝试复制基本实现。

$('#myMosaic').Mosaic();
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>

<body>
  <div id="myMosaic">
    <img src="https://placeimg.com/640/480/all" width="400" height="350" />
    <img src="https://placeimg.com/640/480/all" width="320" height="200" />
    <img src="https://placeimg.com/640/480/all" width="870" height="420" />
    <img src="https://placeimg.com/640/480/all" width="442" height="922" />
  </div>

当我这样做时，我收到与 JS 脚本部分相关的错误：

未捕获的 ReferenceError：马赛克未在（索引）处定义：131

其他人有这个问题吗？我在 HTML 头部分中正确链接到实际的 jquery 马赛克文件。可以实施什么样的解决方案？谢谢！

4

2 回答 2

4

试试这个。

$(document).ready(function(){
    $('#myMosaic').Mosaic();
});
于 2019-07-10T04:19:57.270 回答
2

刚刚使用了jquery-mosaic CDN。

$('#myMosaic').Mosaic();
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>

<body>
  <div id="myMosaic">
    <img src="https://placeimg.com/640/480/all" width="400" height="350" />
    <img src="https://placeimg.com/640/450/all" width="320" height="200" />
    <img src="https://placeimg.com/900/800/all" width="870" height="420" />
    <img src="https://placeimg.com/1000/1000/all" width="442" height="922" />
  </div>

于 2019-07-10T04:27:22.867 回答