2016-11-02 39 views
1

我一直在試圖建立一個放大鏡我的圖片,所以我就上網,發現這樣的:http://mark-rolich.github.io/Magnifier.js/使用magnifier.js產生我的形象在放大鏡

我期待使用有模式設置爲'內部',我希望它能夠像在演示中那樣工作。我刪除了評論了包裝部分,因爲我使用的模式:'內'

我真的不知道怎麼做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的鏈接?

回答