滤镜层及拖动层

最新推荐文章于 2025-12-27 11:46:02 发布

原创最新推荐文章于 2025-12-27 11:46:02 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #filter #border #table #html

http://download1.youkuaiyun.com/down3/20070601/01030929630.rar<HTML> 下载示例

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
//在鼠标显示一个层，该层的内空为div2的内容
function showTip(){
var div3 = document.getElementById('div3'); //将要弹出的层
div3.style.display="block"; //div3初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
div3.style.top=event.clientY+5;
div3.style.position="absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
var div2 =document.getElementById('div2');
//div3.innerText=div2.innerHTML;
}
//关闭层div3的显示
function closeTip(){
var div3 = document.getElementById('div3');
div3.style.display="none";
}
function hiddiv()
{
document.getElementById("div2").style.display='none';
document.getElementById("div3").style.display='none';
}

//控制层div2显示的开关
function switchDIV(){
if(div2.style.display=='block'){
div2.style.display='none';

}
else{
//div2.style.display='block';
document.getElementById("div2").style.display='block';
document.getElementById("div3").style.display='block';
document.getElementById("div2").style.height=window.screen.height-150+"px";
document.getElementById("div2").style.width=window.screen.width-20+"px";
showTip();
//document.getElementById("div2").style.
//alert(window.screen.height);
}
}
var isdown = false
var beginx,beginy
function down()
{
isdown = true;
}

function move()
{
if (isdown){
var endx = event.clientX;
var endy = event.clientY;
div3.style.left = parseInt( div3.style.left ) + endx-beginx;
div3.style.top = parseInt( div3.style.top ) + endy-beginy;
}
beginx = event.clientX;
beginy = event.clientY;
}

function up()
{
isdown = false;
}
//document.body.onmousemove = move;
//document.body.onmouseup = up;
</script>
<style type="text/css">

</style>
</HEAD>
<BODY>

<a href="#"  onClick="switchDIV()">弹出层&锁定背景</a>
<div id="div2" style="display:none;background-color:green">

</div>

<div id="div3" onmousedown="down()" onmousemove="move()" onmouseup="up()">
<table width="200" border="1" bordercolor="#666666" bgcolor="#FFFFFF" >
  <tr>
    <td>拖动层</td>
    <td>弹出层</td>
    <td><input type="text" id="fd" width="100px" /></td>
  </tr>
  <tr>
    <td>&nbxbvcxsp;</td>
    <td>&nbvcxbvcxbvsp;</td>
    <td>&nbsxcbcbp;</td>
  </tr>
  <tr>
    <td>&ncbvcxbbsp;</td>
    <td> </td>
    <td><a href="#"  onClick="hiddiv()">关闭</a>;</td>
  </tr>
</table>

</div>
</BODY>
</HTML>