forked from RDCNWebs/rd.rdlevel.cn
45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
const plugin = (hook, vm) => {
|
|
hook.init(() => {
|
|
const style = document.createElement('style')
|
|
style.setAttribute('type', 'text/css');
|
|
style.innerHTML = `
|
|
.imagetip {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
display: none;
|
|
border: 1px solid #ccc;
|
|
background-color: #fff;
|
|
padding: 5px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
}
|
|
`
|
|
document.head.appendChild(style);
|
|
});
|
|
hook.doneEach(() => {
|
|
const images = document.querySelectorAll('img:not([src*="data:image"])');
|
|
const imagetip = document.createElement('div');
|
|
imagetip.className = 'imagetip';
|
|
document.body.appendChild(imagetip);
|
|
|
|
images.forEach((img) => {
|
|
img.addEventListener('mouseover', (e) => {
|
|
imagetip.style.display = 'block';
|
|
imagetip.innerHTML = `<img src="${img.src}" style="max-width: 300px; max-height: 300px;" />`;
|
|
imagetip.style.left = `${e.pageX + 10}px`;
|
|
imagetip.style.top = `${e.pageY + 10}px`;
|
|
});
|
|
img.addEventListener('mousemove', (e) => {
|
|
imagetip.style.left = `${e.pageX + 10}px`;
|
|
imagetip.style.top = `${e.pageY + 10}px`;
|
|
});
|
|
img.addEventListener('mouseout', () => {
|
|
imagetip.style.display = 'none';
|
|
});
|
|
});
|
|
});
|
|
}
|
|
import plugin from './plugin';
|
|
if (!window.$docsify) {
|
|
window.$docsify = {};
|
|
}
|
|
window.$docsify.plugins = (window.$docsify.plugins || []).concat(plugin); |