Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用放大镜.js在我的图像上生成放大镜_Javascript_Css_Image - Fatal编程技术网

Javascript 使用放大镜.js在我的图像上生成放大镜

Javascript 使用放大镜.js在我的图像上生成放大镜,javascript,css,image,Javascript,Css,Image,我一直在尝试为我的图像创建一个放大镜,所以我上网发现: 我期待着使用一个模式设置为'内',我希望它的工作方式,它在他的演示。我删除了包装器部分,因为我使用的是模式:“inside” 我真的不确定如何使用放大镜.css,但我制作了自己的放大镜.js和Event.js链接,它们似乎可以正常工作 <head> <link rel="stylesheet" type="text/css" href="magnifier.css"> <script type="text/ja

我一直在尝试为我的图像创建一个放大镜,所以我上网发现:

我期待着使用一个模式设置为'内',我希望它的工作方式,它在他的演示。我删除了包装器部分,因为我使用的是模式:“inside”

我真的不确定如何使用放大镜.css,但我制作了自己的放大镜.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>

var evt=新事件(),
m=新放大镜(evt);
m、 附加({
拇指:“#拇指”,
大:'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/1200px-Starry_Night_Over_the_Rhone.jpg',
模式:“内部”,
缩放:3,
可缩放:对
});
这是我工作过的学校的链接


有什么想法吗?

就像处理JS文件一样,您也可以添加自己的CSS

我在上添加了css的url,如下所示:

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

而且它似乎在起作用。这里是w3schools页面的链接(刚刚将url添加到您的代码中):