圖像放大鏡-懸停時縮放圖像，鼠標移動時平移圖像

Question

我在這里找到了一個很好的例子，但是我不知道如何使用代碼。
首先，我在Blogger中嘗試了代碼，但未顯示任何內容。
其次，我在jsfiddle中嘗試了代碼，但也沒有顯示任何內容。
第三，我導出了代碼並將其粘貼到Blogger中，沒有任何顯示。 > :(
該代碼僅在使用導出的.html和在線示例時才有效。 http://codepen.io/ccrch/pen/yyaraz

Blogger不支持該代碼，還是我使用錯誤？

Answer 1

您是否記得要包含jquery ？ 此代碼取決於Jquery javascript框架。

只需在腳本上方添加jquery腳本即可，如下所示：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/yourScriptHere.js"></script>

Answer 2

您還必須放置腳本標簽以打開和關閉腳本。 CodePen鏈接上的JS代碼不包含這些標簽。

腳本開始和結束標簽如下所示：

<script type="text/javascript">

</script>

在這些標簽之間，您可以從CodePen復制並粘貼JavaScript，即

<script type="text/javascript">
 $('.tile')
// tile mouse actions

and so on...

</script>

也將此鏈接復制並粘貼到最新的jQuery腳本中，如BlitZz所述：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

如果這樣做之后圖像仍然無法縮放，請在您的實時頁面上粘貼一個鏈接。