<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>
文字悬浮特效
最新推荐文章于 2023-08-29 13:35:48 发布