DIV+CSS实现的拖动+隐藏/显示效果+背景变暗

最新推荐文章于 2023-07-21 17:49:01 发布

Eray

最新推荐文章于 2023-07-21 17:49:01 发布

阅读量7k

点赞数

分类专栏： Asp.Net技术文章标签： div css function button input textbox

本文链接：https://blog.csdn.net/Eray/article/details/1656489

版权

这是一个使用HTML、CSS和JavaScript实现的交互效果示例，包括一个可拖动的窗口（div id='win1'），窗口标题支持拖动，点击按钮可以实现窗口及背景层（div id='dialogBoxBG'，class='face'）的隐藏和显示。JavaScript函数SetNone()和SetView()分别用于隐藏和显示这两个元素，StartDrag()和Drag()则实现了拖动窗口的功能，同时背景会变暗。整个示例适用于网页交互设计。

摘要由CSDN通过智能技术生成

<head>
<style>
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;z-index:20000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}
.face{position:absolute;top:0px;left:0px;width:1000px;height:730px;z-index:19000;filter: alpha(opacity=50);background-color:transparent!important;background-color:#eee;}
</style>
</head>

<input type="button" ID="Button2" runat="server" value="打开" onclick ="SetView();return false;"/><br />

<div id="dialogBoxBG" class="face"></div>

    <div id="win1" style="background-color: #ffffff;">
    <div class="title" οnmοusedοwn="StartDrag(this)" οnmοuseup="StopDrag(this)" οnmοusemοve="Drag(this)" id="HEB