文字悬浮特效

本文介绍了一种使用自定义提示框的方法,通过简单的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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值