使用magnifier.js在我的圖像上生成一個放大鏡

Question

我一直在嘗試為圖像創建一個放大鏡，所以我上網了，發現了這一點： http : //mark-rolich.github.io/Magnifier.js/

我希望使用將模式設置為“ inside”的模式，並且希望它能像他的演示中那樣工作。 由於使用了以下模式，因此刪除了包裝器部分的注釋：'inside'

我不太確定由magnifier.css構成什么，但是我制作了自己的Magnifier.js和Event.js鏈接，它們似乎正常工作。

<head>
<link rel="stylesheet" type="text/css" href="magnifier.css">
<script type="text/javascript" src="http://www.enviroptics.com/Matt/js/Event.js"></script>
<script type="text/javascript" src="http://www.enviroptics.com/Matt/js/Magnifier.js"></script>
<script type="text/javascript">
var evt = new Event(),
    m = new Magnifier(evt);
</script>
</head>

<body>
<div>
 <a class="magnifier-thumb-wrapper" href="http://en.wikipedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg">
    <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg">
 </a>
<!--    <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>-->
</div>

<script>
m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
    mode: 'inside',
zoom: 3,
zoomable: true
});
</script>
</body>

這是我一直在http://www.w3schools.com/code/tryit.asp?filename=F0EBCN2SLPOI工作的w3schools的鏈接

有任何想法嗎？

Answer 1

就像處理JS文件一樣，您也可以添加自己的CSS。

我在http://mark-rolich.github.io/Magnifier.js/上添加了CSS的網址，如下所示：

<link rel="stylesheet" type="text/css" href="http://mark-rolich.github.io/Magnifier.js/magnifier.css">

它似乎正在工作。 這是w3schools頁面上的鏈接（只需將URL添加到您的代碼中）： http : //www.w3schools.com/code/tryit.asp? filename=F0F991Z62KJ7

使用magnifier.js在我的圖像上生成一個放大鏡

問題描述

1 個解決方案

解決方案1
2 已采納 2016-11-03 13:15:56

使用magnifier.js在我的圖像上生成一個放大鏡

問題描述

1 個解決方案

解決方案1 2 已采納 2016-11-03 13:15:56

解決方案1
2 已采納 2016-11-03 13:15:56