使用JQ代码在页面写个悬浮的提示代码内容:管理员QQ怎出怎么引用到页面
以下是使用JQuery代码实现一个悬浮提示框的示例,其中的管理员QQ可以根据需要修改:
HTML代码:
<div class="popup">
<span class="text">管理员QQ:123456789</span>
</div>
CSS代码:
.popup {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
z-index: 9999;
display: none;
}
.popup .text {
font-size: 14px;
color: #333;
}
JQuery代码:
$(document).ready(function() {
// 显示提示框
$('.popup').fadeIn();
// 鼠标移入时显示提示框
$('.popup').hover(function() {
$(this).stop().fadeIn();
}, function() {
$(this).stop().fadeOut();
});
});
在页面中引用这个代码,需要先引用JQuery库,然后将上述HTML、CSS和JQuery代码放到页面中合适的位置即可。例如:
<!DOCTYPE html>
<html>
<head>
<title>悬浮提示框示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* CSS代码 */
</style>
</head>
<body>
<!-- HTML代码 -->
<script>
// JQuery代码
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bv05 著作权归作者所有。请勿转载和采集!