文字悬浮特效

最新推荐文章于 2023-08-29 13:35:48 发布

转载最新推荐文章于 2023-08-29 13:35:48 发布 · 2.3k 阅读

JavaScript / JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用自定义提示框的方法，通过简单的HTML和JavaScript实现，解决了ToolTip属性显示时间受限的问题，使得提示内容更加丰富且不受时间限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<style type="text/css"> 

.fixedLayer{ 
width:100px; 
line-height:50px; 
background: #FC6; 
border:1px solid #F90; 
position:fixed; 
right:10px; 
bottom:10px; 
}
</style>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	</head>
	<body >
		<a href='#'  tip="   你可能马上会想到ToolTip属性，的确ToolTip属性可以实现这种效果，但是ToolTip属性有一个缺点，它的显示
时间有限制。过了一定的时间，ToolTip会自动消失，只有将鼠标重新移到指定的控件上，ToolTip才可以再次显
现。这样如果您说明的内容 比较多的话，显然ToolTip是不能满足您的需求的。
        这里，优快云在结贴打分的时候给了一个很好的解决方案。在结贴给分的时候，当您将您的鼠标移到给分的文
本框的时候，会出现一个小的黄色矩形，里面分别显示了问题的总分和剩余可分配的分数。如果您不将鼠标移开文"/>这是一个按钮</a>
		<input type="button" value="button1" id="button1" tip="这是另一个按钮"/>
	</body>
	<script type="text/javascript">
	    document.body.onload = function () {
	        var objs = document.getElementsByTagName("*");
	        for (var i = 0; i < objs.length; i++) {
	            var obj = objs[i];
	            if (obj.getAttribute("tip")) {
	                obj.onmousemove = Tips.showTips;
	            }
	        }
	    }
	    var Tips = {
	        mousePos: function (e) {
	            var x, y;
	            var e = e || window.event;
	            return {
	                x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
	                y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
	            };
	        },
	        showTips: function (event) {
	            event = event || window.event;
	            var target = event.srcElement || event.target;
	            var tipsDiv = document.getElementById("tipsDiv");
	            if (typeof tipsDiv == undefined || tipsDiv == null) {
	                tipsDiv = document.createElement("div");
	                tipsDiv.id = "tipsDiv";
	                document.body.appendChild(tipsDiv);
	            }
	            var mouse = Tips.mousePos(event);
	            tipsDiv.style.position = "absolute";
	            tipsDiv.style.width = "400px";
	          //  tipsDiv.style.height = "100%";
	            tipsDiv.style.backgroundColor = "#ecedee";
	            tipsDiv.style.color = "black";
	            tipsDiv.style.border = '1px solid #c5c5c5';
	            tipsDiv.style.bottom = '10px';
	            tipsDiv.style.padding = '10px 10px 10px 10px';
	            tipsDiv.style.top = mouse.y + 10 + 'px';
	            tipsDiv.style.left = mouse.x + 10 + 'px';
	            tipsDiv.innerHTML = target.getAttribute("tip");
	            tipsDiv.style.display = "";
	            target.onmouseout = function () {
	                tipsDiv.style.display = "none";
	            }
	        }
	    }
	</script>
</html>