拖动层效果

百威

浏览: 707380 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript


<!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> 
  <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
  <meta http-equiv="content-script-type" content="text/javascript"> 
  <meta http-equiv="content-style-type" content="text/css"> 
  <title>DoDi Chat v1.0 Beta</title> 
  <style rel="stylesheet" type="text/css" media="all" /> 
  <!-- 
  body { 
    text-align:left; 
    margin:0; 
    font:normal 12px Verdana, Arial; 
    background:#FFEEFF 
  } 
  form { 
    margin:0; 
    font:normal 12px Verdana, Arial; 
  } 
  table,input { 
    font:normal 12px Verdana, Arial; 
  } 
  a:link,a:visited{ 
    text-decoration:none; 
    color:#333333; 
  } 
  a:hover{ 
    text-decoration:none; 
    color:#FF6600 
  } 
  #main { 
    width:400px; 
    position:absolute; 
    left:600px; 
    top:100px; 
    background:#EFEFFF; 
    text-align:left; 
    filter:Alpha(opacity=90) 
  } 
  #ChatHead { 
    text-align:right; 
    padding:3px; 
    border:1px solid #003399; 
    background:#DCDCFF; 
    font-size:11px; 
    color:#3366FF; 
    cursor:move; 
  } 
  #ChatHead a:link,#ChatHead a:visited, { 
    font-size:14px; 
    font-weight:bold; 
    padding:0 3px 
  } 
  #ChatBody { 
    border:1px solid #003399; 
    border-top:none; 
    padding:2px; 
  } 
  #ChatContent { 
    height:200px; 
    padding:6px; 
    overflow-y:scroll; 
    word-break: break-all 
  } 
  #ChatBtn { 
    border-top:1px solid #003399; 
    padding:2px 
  } 
  --> 
  </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("ChatBody").display = "none";} 
  function ChatShow(){gs("ChatBody").display = "";} 
  function ChatClose(){gs("main").display = "none";} 
  function ChatSend(obj){ 
    var o = obj.ChatValue; 
    if (o.value.length>0){ 
      $("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>"; 
      o.value=''; 
    } 
  } 

  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="main" class="dragclass" style="left:600px;top:300px;"> 
  <div id="ChatHead"> 
    <a href="#" onclick="ChatHidden();">-</a> 
    <a href="#" onclick="ChatShow();">+</a> 
    <a href="#" onclick="ChatClose();">x</a> 
  </div> 
  <div id="ChatBody"> 
    <div id="ChatContent"></div> 
    <div id="ChatBtn"> 
      <form action="" name="chat" method="post"> 
      <textarea name="ChatValue" rows="3" style="width:350px"></textarea> 
      <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> 
      </form> 
    </div> 
  </div> 
</div> 

</body> 
</html>

分享到：

JQuery 发送Json格式数据 | 发个自己写的表格操作类(添加，删除，排序 ...

2015-04-16 20:28
浏览 578
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

拖动层效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

拖动层效果

评论

发表评论

相关推荐

Javascript刷新页面的实例

一份老外写的XMLHttpRequest代码多浏览器支持兼容性

漂亮的Slider效果类终于封装成功

用简单的脚本实现一款漂亮的下拉菜单

Javascript操纵Cookie实现购物车程序

推荐:右键菜单

发个自己写的表格操作类(添加，删除，排序，上移，下移)

cloneNode实现表格增加删除效果

支持IE和FF的div＋css选项卡

一个分页的js

JavaScript实现拖拽网页内元素的方法

让IE浏览器支持HTML5标准的方法

Javascript上传图片

javascript ajax

javascript表格和表单

javascript事件

javascript基础

Javascript 验证上传图片大小[客户端]

带Checkbox的列表框

判断Checkbox和Radio的一种方法

最近访客更多访客>>