`
癫觉士
  • 浏览: 19524 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery窗口拖动

阅读更多

$(function(){ 

   // Start 窗口的拖动
         var _move=false;                 //移动标记
         var _x,_y;
        var $width=$('#outer').width();
        var $height=$('#outer').height(); 
        var $screen=$(document).width();                           
        $(".title").mousedown(function(e){    //鼠标离控件左上角的相对位置
              _move=true;
            _x=e.pageX-parseInt($("#outer").css("left"));
            _y=e.pageY-parseInt($("#outer").css("top"));
            $("#outer").fadeTo(20, 0.5);  //点击后开始拖动并透明显示
          });

          $(document).mousemove(function(e){
                  if(_move){
                            var x=e.pageX-_x;                   //移动时根据鼠标位置计算控件左上角的绝对位置
                            var y=e.pageY-_y;
                            var $side=$width+x+20;
                           if($screen<=$side||x<=0)
                                     _move=false;                          //控制左右边界 
                            else
                                    $("#outer").css({top:y,left:x});      //控件新位置
                   }
           }).mouseup(function(){
                    _move=false;

                    $("#outer").fadeTo("fast", 1);                           //松开鼠标后停止移动并恢复成不透明
           });

  // End 窗口的拖动

});
*******************

<div id="outer">

       <div class="title">标题</div>

</div>

 

分享到:
评论

相关推荐

    jQuery可拖动图片漂浮广告代码.zip

    《jQuery可拖动图片漂浮广告代码》是一个实用的JavaScript特效,主要利用jQuery库实现了一种动态、可交互的图片广告展示方式。该代码的核心功能是让图片广告能够在用户浏览网页时始终保持在屏幕上的特定位置,同时...

    Jquery浮动窗口拖动放大缩小关闭效果

    "Jquery浮动窗口拖动放大缩小关闭效果"这个主题涉及了几个关键的jQuery功能,包括元素的定位、事件监听、动画效果以及用户交互的增强。 1. **浮动窗口**:浮动窗口通常指的是在网页上可以自由移动的弹出式窗口,如...

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

    【jQuery可拖动窗口提示信息代码】是一种基于JavaScript库jQuery实现的交互式用户界面功能,主要应用于创建可拖动的悬浮窗口,为用户提供实时、动态的提示信息。这个功能尤其适用于网页应用,可以提高用户体验,使得...

    jQuery页面窗口拖动预览效果.zip

    在本项目中,“jQuery页面窗口拖动预览效果.zip”是一个包含HTML5和jQuery技术实现的页面窗口拖动预览特效。这个特效主要用于提供一种交互式的用户体验,让用户在不打开新窗口或离开当前页面的情况下,预览链接内容...

    jQuery窗口拖动功能的实现代码

    本文通过jquery代码实现窗口拖动功能以及jQuery 鼠标拖拽移动窗口的实现代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下

    jQuery可拖动右下角浮动窗口特效.zip

    本项目“jQuery可拖动右下角浮动窗口特效”就是基于jQuery实现的一种用户界面交互功能,旨在提供一个可自由移动且能自适应浏览器窗口大小的浮动窗口。这种效果常见于弹出提示框、广告浮窗或设置面板,能够提升用户的...

    jQuery可拖动提示窗口代码

    在本案例中,"jQuery可拖动提示窗口代码"是一个利用jQuery实现的功能模块,用于创建一个可以被用户拖动并且带有搜索功能的悬浮提示窗口。这个功能通常用于创建类似聊天消息盒的应用,提供实时信息提示和交互体验。 ...

    JQuery 随意拖动的层

    这个功能通常用于创建可拖动的对话框、窗口或任何其他需要移动的界面元素。 首先,我们需要理解jQuery的基本概念。jQuery通过一种简化的语法,使JavaScript代码更易读、更简洁。例如,`$(selector).action()`是...

    一个JQuery插件 - Javascript可拖动的模式窗口

    **jQuery插件:JavaScript可拖动的模式窗口** 在网页设计和开发中,模式窗口(Modal Windows)是一种常见的用户交互元素,它可以在不离开当前页面的情况下显示额外的信息或功能。这个"JavaScript可拖动的模式窗口...

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

    在"jQuery可拖动提示窗口代码.zip"中,我们看到的核心技术就是利用jQuery实现的窗口拖动功能。 1. **HTML结构**: `index.html`是网页的基础结构文件。在这个文件中,你需要定义提示窗口的HTML元素,通常会包含一...

    JQuery拖动窗口层

    本主题将深入探讨如何使用jQuery实现“拖动窗口层”的功能,这对于创建交互式用户界面尤其有用。"窗口层"通常指的是浮动在页面上的可移动元素,如弹出框、对话框或自定义窗口。 首先,我们需要理解jQuery中的`...

    JQuery拖动窗口,拖动时有半透明效果,

    本主题聚焦于使用jQuery实现一个可拖动的窗口,并在拖动过程中呈现出半透明的效果,这在创建交互式用户界面时十分有用。以下是关于这个功能的详细解释和实现步骤。 1. **理解jQuery拖动事件** jQuery提供了`....

    可拖动的jQuery便签特效

    【jQuery可拖动便签特效】是一种通过JavaScript库jQuery实现的交互式网页元素,它可以模拟现实生活中便签的可移动性,为用户带来更直观、更有趣的网页体验。这种特效通常用于创建提醒、记录备忘或者展示动态信息,极...

    jQuery版简单易用的可拖动右下角浮动窗口.zip

    本项目“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的交互式UI组件,适用于创建具有动态效果的网页元素,特别是那些需要在用户界面上悬浮并可自由拖动的窗口。 这个特效的核心功能在于提供一个...

    jQuery批量图片拖动排序和查看

    本文将详细探讨"jQuery批量图片拖动排序和查看"这一主题,结合给定的标签,我们将深入解析相关的技术点。 首先,我们要理解jQuery中的拖动排序功能。拖动排序是通过jQuery UI库中的`draggable()`和`droppable()`...

    jquery窗体拖动布局

    "jQuery窗体拖动布局"技术就是这种体验的一种体现,它允许用户通过简单的鼠标拖动操作来调整页面上各个窗体的位置,以满足个性化的需求。jQuery,作为一款强大的JavaScript库,提供了丰富的功能和简便的API,使得...

    35、jQuery页面窗口拖动预览效果

    在本教程中,我们将探讨“35、jQuery页面窗口拖动预览效果”,这是一个用于增强用户体验的功能,使得用户在拖动页面元素时能够实时预览其位置和效果。 首先,我们需要理解jQuery中的拖动(Draggable)功能。jQuery ...

Global site tag (gtag.js) - Google Analytics