forked from RDCNWebs/rd.rdlevel.cn
new
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
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);
|
||||
Reference in New Issue
Block a user