js 浮动窗效果

在奋斗的大道

于 2015-08-10 09:18:39 发布

阅读量1.9k

点赞数

分类专栏： HTML5+CSS3 页面设计

HTML5+CSS3 页面设计专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的按钮提示效果。当鼠标悬停在按钮上时，会出现一个带有'+1'文本的提示框，该提示框的位置会根据按钮的位置自动调整。通过此示例，读者可以学习如何使用JavaScript操作DOM元素并实现基本的交互效果。

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

源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Demo</title> 
<script type="text/javascript"> 
function over(){
var btn = document.getElementsByTagName('button')[0]; 
var flt = document.getElementsByTagName('span')[0];
var x = btn.offsetLeft +45 + 'px'; 
var y = btn.offsetTop  -10 + 'px'; 
flt.style.top = y; 
flt.style.left = x; 
flt.style.display = 'block'
}

function out(){
var flt = document.getElementsByTagName('span')[0]; 
flt.style.display = 'none'; 
}


</script> 

</head> 
<body> 
<button id="btn" style="position: absolute;" onmouseout="out()" onmouseover="over()">Click</button> 
 
<span style="display: none;position: absolute;"> +1</span>
 
</body> 
</html> 
</html>

效果展示：