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

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

Eray

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

阅读量7.1k

点赞数

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

本文链接：https://blog.youkuaiyun.com/Eray/article/details/1656489

版权

Asp.Net技术专栏收录该内容

41 篇文章

订阅专栏

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

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

<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">窗口</div>

        这是窗口里的内容。这个窗体是可以拖动的噢。
        <input type="text" id="Textbox1" />
        <input type="button" ID="Button3" value="关闭" onclick ="SetNone();return false;" />
    </div>

    这是一个什么样的故事啊?

<script language="javascript" type="text/javascript">
//dialogBoxBG.style.height = document.body.scrollHeight;
SetNone();

function SetNone()
{
win1.style.display="none";
dialogBoxBG.style.display="none";

}
function SetView()
{

win1.style.display="";
dialogBoxBG.style.display="";
}

var move=false;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
obj.setCapture();
obj.style.background="#999";
move=true;
}
}

function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}

}

function StopDrag(obj)
{
obj.style.background="#000";
obj.releaseCapture();
move=false;
}
</script>

本代码为纯ASPX页面代码，不需要在CS后台代码改动。
style：Win1,title负责拖动、显/隐；face负责，背景变暗。
DIV ：Win1,title负责拖动、显/隐；dialogBoxBG负责变暗。
JS function：SetNone()负责将两个DIV隐藏；SetView()负责将两个DIV展示。
StartDrag(),Drag(),负责拖动。