https://www.bootcdn.cn/fancybox/
https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancy...
https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancy...
https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancy...
https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancy...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
* {box-sizing: border-box;}
.img-magnifier-container {
position: relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}
.zoom {
width: 8px;
height: 8px;
border-radius: 8px;
display: inline-block;
position: relative;
border: 2px solid currentColor;
}
.zoom:before {
content: '';
width: 1px;
height: 6px;
background: currentColor;
display: block;
top: 1px;
left: 3px;
position: absolute;
}
.zoom:after {
content: '';
height: 1px;
width: 5px;
background: currentColor;
display: block;
top: 3px;
left: 1px;
position: absolute;
}
.zoom-inner {
width: 6px;
height: 3px;
display: block;
background: currentColor;
position: absolute;
top: 7px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<html>
<head>
<meta charset ="utf-8">
<title>我的页面</title>
<!--CSS-->
<link rel ="stylesheet" type ="text/css" href ="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
</head>
<body>
<h2>fancyBox v3.5.7 with Magnifier.js </h2>
<p>
<a class="magnifier-thumb-wrapper" href="https://lipsum.app/id/2/1600x1200" data-fancybox="images">
<img src="https://lipsum.app/id/2/200x150" />
</a>
</p>
<p>
<a class="magnifier-thumb-wrapper" href="https://lipsum.app/id/3/1600x1200" data-fancybox="images">
<img src="https://lipsum.app/id/3/200x150" />
</a>
</p>
<small>
to magnify, open the image then click on the magnifier icon (top-right)
</small>
<script>
$( '[data-fancybox]' ).fancybox({
infobar: true,
toolbar: true,
buttons: [
'fullScreen',
'thumbs',
'zoom',
'close'
],
btnTpl: {
zoom : '<button class="fancybox-button fancybox-zoom"><div class="zoom"><span class="zoom-inner"></span></div></button>'
},
onInit : function( instance ) {
instance.$refs.toolbar.find('.fancybox-zoom').on('click', function() {
var evt = new Event(), m = new Magnifier(evt);
m.attach({
thumb: '.fancybox-image',
large: instance.current.src,
mode: 'inside',
zoom: 3,
zoomable: true
});
});
}
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。