JS控制的可拖动层代码(兼容IE,FF)

最新推荐文章于 2024-07-12 20:49:16 发布

weng2961389

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量514

点赞数

文章标签： ie function stylesheet xhtml html javascript

本文链接：https://blog.csdn.net/weng2961389/article/details/5324338

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <style rel="stylesheet">
  <!--
  #move {
	width:500px;
	position:absolute;
	left:600px;
	top:300px;
	background:#f5fafe;
	text-align:left;
	filter:Alpha(opacity=90);
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #dbdbdb;
	border-bottom-color: #dbdbdb;
  }
  #MoveTitle {
	border:1px solid #1684bf;
	font-size:12px;
	color:#fff;
	cursor:move;
	font-family: Arial;
	line-height: 25px;
	padding-right: 10px;
	height: 25px;
	background-color: #1c95ce;
	padding-left: 10px;
  }
  #MoveTitle a:link,#MoveTitle a:visited, {
    font-size:14px;
    font-weight:bold;
    padding:0 3px
  }
#MoveTitle em{
	font-style: normal;
	float: right;
  }
#MoveTitle em a{
	text-align:center;
	border:1px solid #1684bf;
	font-size:14px;
	color:#006699;
	font-family: Arial;
	line-height: 24px;
	padding-right: 5px;
	height: 24px;
	padding-left: 5px;
	text-decoration: none;
	background-color: #7bc7e7;
	font-weight: normal;
  }
  #MoveBody {
	padding:2px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #1684bf;
	border-right-color: #1684bf;
	border-bottom-color: #1684bf;
	border-left-color: #1684bf;
  }
  #MoveContent {
	height:350px;
	padding:6px;
	overflow-y:scroll;
	word-break: break-all
  }
  -->
  </style>
  <script language="javascript" type="text/javascript">
  <!--
  function $(d){return document.getElementById(d);}
  function gs(d){var t=$(d);if (t){return t.style;}else{return null;}}
  function gs2(d,a){
    if (d.currentStyle){ 
      var curVal=d.currentStyle[a]
    }else{ 
      var curVal=document.defaultView.getComputedStyle(d, null)[a]
    } 
    return curVal;
  }
  function ChatHidden(){gs("MoveBody").display = "none";}
  function ChatShow(){gs("MoveBody").display = "";}
  function ChatClose(){gs("move").display = "none";}
  if  (document.getElementById){
    (
      function(){
        if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); }
      
        var n = 500;
        var dragok = false;
        var y,x,d,dy,dx;
        
        function move(e)
        {
          if (!e) e = window.event;
          if (dragok){
            d.style.left = dx + e.clientX - x + "px";
            d.style.top  = dy + e.clientY - y + "px";
            return false;
          }
        }
        
        function down(e){
          if (!e) e = window.event;
          var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
          if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }
          if('TR'==temp.tagName){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }
        
          if (temp.className == "dragclass"){
            if (window.opera){ document.getElementById("Q").focus(); }
            dragok = true;
            temp.style.zIndex = n++;
            d = temp;
            dx = parseInt(gs2(temp,"left"))|0;
            dy = parseInt(gs2(temp,"top"))|0;
            x = e.clientX;
            y = e.clientY;
            document.onmousemove = move;
            return false;
          }
        }
        
        function up(){
          dragok = false;
          document.onmousemove = null;
        }
        
        document.onmousedown = down;
        document.onmouseup = up;
      
      }
    )();
  }
  -->
  </script>
</head>

<body>
<div id="move" class="dragclass" style="left:100px; top:100px;">
  <div id="MoveTitle">

  	<em><a href="#" onclick="ChatHidden();">-</a>
    <a href="#" onclick="ChatShow();">+</a>
    <a href="#" onclick="ChatClose();">×</a></em>
  	<strong>Title：</strong>
  </div>

  <div id="MoveBody">

    <div id="MoveContent">
   	</div>
  </div>
</div>
</body>
</html>

weng2961389

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS控制的可拖动层代码(兼容IE,FF)

html xmlns="http://www.w3.org/1999/xhtml">head>title>title> style rel="stylesheet"> <!-- #move { width:500px; position:absolute; left:600px; top:300px; background:#f5fafe; t
复制链接

扫一扫