例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动按钮</title>
<style>
*
{
margin: 0px
padding: 0px
}
#container
{
width: 1000px
height: 3000px
background-color: #1b6d85
margin: auto
}
#div1
{
height: 600px
background-color: #255625
}
#div2
{
height: 600px
background-color: #c0a16b
}
#div3
{
height: 600px
background-color: #b92c28
}
#div4
{
height: 600px
background-color: #449d44
}
#div5
{
height: 600px
background-color: #999999
}
.btn-style
{
width: 30px
height: 120px
position: fixed/*此处即是固定按钮位置的属性。*/
left: 1500px
top: 400px
}
</style>
</head>
<body>
<button class="btn-style">这是一个浮动按钮</button>
<div id="container">
<div id="div1">第一节</div>
<div id="div2">第二节</div>
<div id="div3">第三节</div>
<div id="div4">第四节</div>
<div id="div5">第五节</div>
</div>
</body>
</html>
效果图：
首先根据需求我们需要一个按钮，一个d出窗口层；OK，废话不多说；
按钮就用一个基本的：
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>
我们要给浮动层设置一下样式
.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}
OK ,下面就是JS部分：
首先需要引入一个JS库，版本自己定义：
然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})
1、创建一个按钮元素：使用HTML元素创建一个按钮，并设置其文本或图标等属性。2、创建一个悬浮菜单列表：使用HTML和元素创建一个无序列表，并在其中添加需要展示的菜单项，使用CSS样式将该列表隐藏起来，使用JavaScript控制菜单的显示与隐藏，添加JavaScript事件监听器，在按钮被点击时切换菜单的可见性状态。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）