怎么让预览窗口的内容直接显示ID:ABC的内容,并适用IE和火狐:<div ID="ABC" onmousemove="showPreview(event, this)" onmouseout="hidePreview()"> <!-- 需要显示预览内容的DIV --> <p>预览内容</p> </div> <div id="preview" style="display:none; position:absolute;"> <!-- 预览浮窗 --> <p>预览内容</p> </div> <script> var previewElement = document.getElementById("preview"); function showPreview(event, element) { // 获取需要预览的内容 var previewContent = element.innerHTML; // 设置预览浮窗内容 previewElement.innerHTML = previewContent; // 设置预览浮窗位置 previewElement.style.left = event.clientX + "px"; previewElement.style.top = event.clientY + "px"; // 显示预览浮窗 previewElement.style.display = "block"; } function hidePreview() { // 隐藏预览浮窗 previewElement.style.display = "none"; } </script>
时间: 2024-01-30 12:03:50 浏览: 41
你可以在 showPreview 函数中添加对不同浏览器的兼容处理,例如:
```
function showPreview(event, element) {
// 获取需要预览的内容
var previewContent = element.innerHTML;
// 设置预览浮窗内容
previewElement.innerHTML = previewContent;
// 设置预览浮窗位置
var left = event.clientX + "px";
var top = event.clientY + "px";
if (document.documentElement && document.documentElement.scrollTop) {
left = event.clientX + document.documentElement.scrollLeft + "px";
top = event.clientY + document.documentElement.scrollTop + "px";
} else if (document.body) {
left = event.clientX + document.body.scrollLeft + "px";
top = event.clientY + document.body.scrollTop + "px";
}
previewElement.style.left = left;
previewElement.style.top = top;
// 显示预览浮窗
previewElement.style.display = "block";
}
```
这样,无论是在 IE 还是 Firefox 浏览器中,都可以正确地显示预览浮窗,并根据滚动条的位置设置预览浮窗的位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)