`
senton
  • 浏览: 206846 次
  • 性别: Icon_minigender_1
  • 来自: 紫禁城
社区版块
存档分类
最新评论

使用CSS+JavaScript实现可拖动的窗口的源代码(推荐)

    博客分类:
  • Web
阅读更多

<!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>
 

分享到:
评论

相关推荐

    javascript+CSS制作的类似相册浏览源代码

    本文将深入探讨如何使用JavaScript和CSS来创建一个类似相册浏览的源代码,以及C#在其中可能扮演的角色。 首先,JavaScript作为客户端脚本语言,负责处理用户的交互事件,如点击、拖动等,以及动态更新页面内容。在...

    400多个css+javascript网页特效

    1. **拖拽效果**:JavaScript 提供了实现拖拽功能的能力,让用户能够通过鼠标操作页面元素,例如拖动树形列表、布局元素等,这在网页设计中常用于构建可自定义的界面。 2. **模块化编辑**:某些特效允许用户直接在...

    javascript实现可以拖动的浮动窗口;源代码

    在这个场景中,我们关注的是使用JavaScript来实现一个可以拖动的浮动窗口功能。这种技术常用于创建更加交互性和用户友好的网页元素,如对话框、通知或者自定义控件。 实现拖动功能的关键在于监听用户的鼠标事件,...

    css+htmt+js使用原生js实现用户登录窗口的关闭打开与移动源代码

    在网页开发中,创建一个可交互的用户登录窗口是常见的需求。这个项目通过结合HTML、CSS和JavaScript(原生JS)技术,实现了这样一个功能。在这个过程中,开发者可以学习到如何控制元素的显示与隐藏,以及如何实现...

    HTML5期末考核大作业,个人网站—— 程序员个人简历模板下载HTML+CSS+JavaScript

    该网站包含了个人介绍、作品展示、技能介绍等多个页面,使用了DIV+CSS布局,并加入了JavaScript来实现动态效果。这种类型的作业通常要求学生掌握以下技能: - **网页布局设计**:通过DIV+CSS实现页面布局,包括响应...

    网页应用 - TODO-APP(可拖拽)使用Docker+Nodejs+Express+React实现 源代码

    Node.js是一个开放源代码、跨平台的JavaScript运行环境,用于在服务器端执行JavaScript代码。Express是基于Node.js构建的web应用框架,它简化了HTTP服务器的创建,提供了路由处理、中间件等功能,使得开发Web API变...

    精通CSS.DIV.网页样式与布局 源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一...

    div CSS+JS特效大集合(网络收集)

    资源包中的每个子文件代表一个特定的div特效实例,开发者可以通过查看源代码,了解实现原理,并根据需要进行修改和应用。这些实例覆盖了菜单、滑块、弹出框、轮播图、计时器等多种场景,不仅有助于提升技术水平,也...

    图文轮播(js+css+html)

    在“run2”这个文件夹中,通常会包含项目的源代码文件,如HTML、CSS和JS文件,以及可能的图片资源。开发者可以通过查看这些文件,了解具体的实现细节,例如DOM操作、CSS选择器的使用、事件监听和函数逻辑等。对于...

    html5 javascript实现的视频自定义进度条

    以上就是使用HTML5、CSS和JavaScript实现视频自定义进度条的基本步骤。这个功能使得用户可以直观地了解视频的播放状态,同时也提供了更丰富的交互体验。在实际项目中,可能还需要考虑其他因素,如兼容性、性能优化...

    【JavaScript源代码】JavaScript实现简单拖拽效果.docx

    在本实例中,我们将分析如何使用 JavaScript 和 CSS 创建一个可拖动的蓝色盒子。 首先,我们需要创建 HTML 结构,这里包含一个 `div` 元素,其中包含一个 `p` 元素,用于展示文本内容: ```html 我是个蓝色的...

    html5+css3+js移动端带歌词音乐播放器代码.zip

    例如,可以设置`src`属性指定音频源,使用`controls`属性添加播放、暂停、音量等控制。此外,HTML5的`&lt;canvas&gt;`元素可用于动态绘制歌词,展示歌词与音乐同步的效果。 CSS3(Cascading Style Sheets第三版)则负责...

    CSS3+SVG实现鼠标滑块拖动圆形进度特效源码.zip

    在压缩包内的文件"132686921712093150"可能是源代码文件,可能包含了HTML、CSS和JavaScript代码。HTML负责构建页面结构,CSS负责样式和动画效果,JavaScript则可能用于处理滑块的拖动事件和进度更新逻辑。 通过结合...

    jquery+CSS3实现可拖拽的罐头贴纸3D动画效果源码.zip

    在本项目中,"jquery+CSS3实现可拖拽的罐头贴纸3D动画效果源码.zip" 是一个利用jQuery库和CSS3技术构建的交互式3D动画效果。这个源码包主要展示了如何将网页元素(在这个案例中是“罐头贴纸”)设计成可拖动并附带3D...

    jQuery+CSS3实现的可拖拽悬浮弹性菜单特效源码.zip

    该资源是一个基于jQuery和CSS3技术实现的可拖拽悬浮弹性菜单的源代码包。这个特效使得用户可以自由地在页面上移动菜单,同时菜单会根据屏幕尺寸和交互行为展现出弹性的效果,增强了用户的交互体验。 jQuery是一个轻...

    销售地图CSS+DIV源码

    - js:这个目录通常包含JavaScript源代码文件,可能有地图的核心逻辑、事件处理函数、以及与服务器交互的AJAX请求代码。 总的来说,销售地图CSS+DIV源码是网页开发中的一种高效解决方案,通过CSS和DIV实现地图的...

    html5+svg交互式3D商场地图代码

    在3D商场地图中,SVG可能被用来创建可缩放的楼层平面图,甚至可以包含3D效果,通过CSS3的变换和投影实现。SVG还支持事件监听,使得用户可以通过点击、拖动等方式与地图进行交互。 CSS(Cascading Style Sheets)在...

    jQuery可拖动窗口提示信息代码.zip

    2. jiaoben5441.js:这很可能是实现拖动窗口功能的JavaScript源代码。文件名可能是项目或开发者的内部命名规则,不一定直接反映代码的具体内容。这个文件包含了实现拖动、搜索提示等功能的核心逻辑,包括事件监听、...

    【JavaScript源代码】vue实现放大缩小拖拽功能.docx

    在Vue.js中实现一个具有放大、缩小和拖拽功能的弹框,主要涉及到自定义指令(Directives)的使用和事件监听。以下是如何利用JavaScript和Vue.js实现这一功能的详细步骤: 1. 首先,在`utils`文件夹下创建一个新的`...

    【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx

    在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验,特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法,它允许我们优雅地实现拖放动画和排序。 首先,让...

Global site tag (gtag.js) - Google Analytics