圖像放大鏡 - 放大圖像懸停和平移圖像鼠標移動

我在這裏找到了一個很好的例子，但我不知道如何使用代碼。
首先，我嘗試了Blogger中的代碼，沒有顯示任何內容。
其次，我嘗試了jsfiddle中的代碼，沒有顯示任何內容。
第三，我將代碼導出並粘貼到Blogger中，沒有任何顯示。 > :(
的代碼只有當我使用導出.html和在線樣本工程。 http://codepen.io/ccrch/pen/yyaraz 圖像放大鏡 - 放大圖像懸停和平移圖像鼠標移動

不博客不支持的代碼或我使用它錯？

來源

2016-11-29 Louis55

你是否記得包括jquery？此代碼依賴了jQuery JavaScript框架

只需提供以上腳本的jQuery腳本像這樣：

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

來源

2016-11-29 04:46:49 BlitZz

我試圖導入所有腳本和樣式，Blogger中的代碼和jsfiddle無法正常工作。我也試圖把它們放在'header'和'body'標籤中。他們都沒有顯示預覽圖像。 – Louis55

「所有腳本」你是什麼意思？這裏是一個完全相同的代碼jsfiddle：https://jsfiddle.net/a9rs4aza/你的問題是，你需要附加一個額外的JavaScript框架稱爲jquery。這裏有一個指南，如果你仍然卡住：http://www.w3schools.com/jquery/jquery_get_started.asp – BlitZz

我的意思是在導出的'.html'，'.css'，'.js'文件中使用的腳本和一些在線樣式表，JavaScript文件。編輯：我已經導入你提到的那個文件，但它對我不起作用？！ – Louis55

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

腳本開始和結束標記看起來像這樣：

<script type="text/javascript"> 

</script>

在這些標籤之間，你會從CodePen即

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

and so on... 

</script>

而且複製複製並粘貼JavaScript和粘貼此鏈接到最新的jQuery腳本，如BlitZz提到：

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

如果這樣做後，圖像不請不要放大，請將鏈接粘貼到您的實時頁面。

來源

2016-11-29 05:12:46

圖像放大鏡 - 放大圖像懸停和平移圖像鼠標移動

回答

相關問題