`
f303153041
  • 浏览: 45587 次
社区版块
存档分类
最新评论

可以拖动的悬浮窗

阅读更多
style{
.show {
display: none;
background: transparent;
text-align: center;
position: absolute;
z-index: 2;
width: 770px;
height: 500px;
}

.title {
background: #C0C0C0;
width: 770px
}
}
<script>
//移动DIV

function closePreWin(){
       preWin.style.display = "none";
     }
    
     
      $(document).ready(function() 
        { 
            $(".title").mousedown(function(e)//e鼠标事件 
            { 
                $(this).css("cursor","move");//改变鼠标指针的形状 
                 
                var offset = $(this).offset();//DIV在页面的位置 
                var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
                var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
                $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 
                { 
                    $(".show").stop();//加上这个之后 
                     
                    var _x = ev.pageX - x;//获得X轴方向移动的值 
                    var _y = ev.pageY - y;//获得Y轴方向移动的值 
                     
                    $(".show").animate({left:_x+"px",top:_y+"px"},10); 
                }); 
                 
            }); 
             
            $(document).mouseup(function() 
            { 
                $(".title").css("cursor","default"); 
                $(this).unbind("mousemove"); 
            }) 
        });

</script>


<div id="firstDiv" style="position: absolute; z-index: 1;">
</div>

<div id="preWin" class="show">
        <div id="title" class="title">
<p align="right">
<span onClick="closePreWin()">关闭</span>
</p>
</div>
<div id="pre">content</div>
</div>

拖动title 即可拖动 preWin div了 preWin 是悬浮在firstDiv之上
分享到:
评论

相关推荐

    可拖动的悬浮窗+对话框悬浮窗

    - 创建对话框悬浮窗可以继承自`Dialog`类,或者直接使用`WindowManager`,并调整布局和样式以达到对话框效果。 4. **权限申请**: - 在Android 6.0及以上版本,使用悬浮窗需要申请`SYSTEM_ALERT_WINDOW`权限。...

    E4A悬浮窗类库,面板悬浮窗类库

    这种悬浮窗可以承载各种信息,如通知、计时器、快捷按钮等,为用户提供便捷的操作界面。 悬浮窗在E4A中的实现主要依赖于特定的类库,也就是我们这里提到的"面板悬浮窗类库"。这个类库通常包含了一系列预定义的函数...

    APP内悬浮窗

    悬浮窗通常可以自由移动,甚至可以进行缩放,使得用户在使用APP时能同时处理其他任务或获取额外信息。 实现APP内悬浮窗的关键在于使用Android系统的` WindowManager`服务。`WindowManager`是Android系统提供的接口...

    android 悬浮窗全屏显示,锁屏页面悬浮窗全屏显示

    7. **优化用户体验**:为了提供良好的用户体验,悬浮窗应该具备响应用户的触摸事件,如拖动、缩放等。可以通过监听`MotionEvent`来实现这些功能。同时,应避免遮挡用户的重要操作,例如在输入密码或接听电话时自动...

    可拖动点击的桌面悬浮窗

    在安卓平台上,实现一个可拖动且点击响应的桌面悬浮窗是一项常见的需求,尤其是在开发辅助工具或者自定义功能的应用时。这个标题“可拖动点击的桌面悬浮窗”所涉及的知识点主要涵盖以下几个方面: 1. **悬浮窗权限*...

    安卓各种悬浮窗源码

    我们可以通过重写`View`的`onTouchEvent()`方法,来捕获用户的触摸事件,实现悬浮窗的拖动。点击事件则可以绑定到悬浮窗上的按钮或其他元素,进行相应的逻辑处理。 此外,权限管理也是需要注意的一环。由于悬浮窗...

    android悬浮窗,android无需权限的悬浮窗

    android悬浮窗 android无需权限的悬浮窗例子 android悬浮窗权限 android拖动视图 安卓悬浮窗 安卓悬浮球 android悬浮球 大部分人实现的悬浮窗都需要授权悬浮窗权限,否则无法使用,但本人开发这个悬浮窗无需权限,...

    Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果 源码程序

    通过监听触摸事件,可以实现悬浮窗的拖动和缩放。在`MotionEvent`的ACTION_DOWN、ACTION_MOVE和ACTION_UP事件中更新悬浮窗的位置和大小。 7. **悬浮窗的显示与隐藏** 提供方法控制悬浮窗的显示和隐藏,通过`...

    Android实例源码-悬浮窗类安卓源代码(4例).zip

    在Android开发中,悬浮窗(Floating Window)是一种特殊类型的窗口,它可以显示在应用程序的顶层,甚至其他应用之上,用户可以在不关闭当前应用的情况下查看或操作悬浮窗内容。本压缩包包含四个具体的Android悬浮窗...

    安卓悬浮窗相关-悬浮窗仿qq小火箭的实现源码可运行可作为桌面动态图的例子.rar

    这可能包含一个图标,代表小火箭,以及可能的触摸事件监听,使得用户可以拖动悬浮窗或者点击执行特定操作。 为了让悬浮窗能随系统启动而启动,还需要在`AndroidManifest.xml`中声明服务,并在`&lt;application&gt;`标签内...

    android伸缩式悬浮窗

    它允许我们将视图(View)添加到窗口层级结构中,这些视图可以作为浮动窗口显示在应用之上或之下,比如我们常见的悬浮按钮、悬浮窗等。 实现可伸缩式悬浮窗的关键步骤如下: 1. 创建悬浮窗布局: 首先,我们需要...

    android桌面悬浮窗

    在Android系统中,桌面悬浮窗是一种非常实用的功能,它可以在用户使用其他应用程序的同时显示重要的信息或者提供便捷的操作入口。本文将深入探讨如何实现一个具备自由拖动和智能隐藏功能的Android桌面悬浮窗。 首先...

    div层悬浮窗和锁屏

    在网页设计和开发中,"div层悬浮窗和锁屏"是一个常见的需求,尤其是在构建交互式用户界面时。Div层通常被用作HTML布局的基本构建块,可以用来创建各种元素,如弹出框、提示信息或者浮动窗口。悬浮窗则是指在用户滚动...

    android 桌面悬浮窗点击穿透

    1、可执行demo2、service中添加悬浮窗,可增加,删除,悬浮窗。3、可点击悬浮窗事件,4、点击悬浮窗可将点击事件穿透到桌面5、只是demo,ui与逻辑不完美

    简单实现拖拽功能——悬浮窗效果

    在Android开发中,实现拖拽功能以及悬浮窗效果可以极大地提升用户体验,使用户与应用的交互更加直观和便捷。本文将详细讲解如何在Android中创建一个具有拖拽功能的悬浮窗,并提供相应的代码示例。 首先,让我们了解...

    自定义的悬浮窗,可托拉拽

    通过学习和分析这些代码,你可以更好地理解如何在Android中创建、拖动和删除自定义的悬浮窗。此外,你还可以根据需求扩展这个悬浮窗的功能,例如添加点击事件、动画效果或者与其他组件的交互等。

    Android 视频悬浮窗

    此外,还需要为用户提供拖动和缩放悬浮窗的能力。为此,需要在`MyFloatView`中监听触摸事件,根据手指移动和缩放手势更新布局参数。 在应用退出或用户关闭悬浮窗时,别忘了移除视图并释放`MediaPlayer`资源: ```...

    css3实现网页悬浮窗功能

    此外,为了实现响应式设计,我们可以使用媒体查询(media queries)来调整悬浮窗在不同屏幕尺寸下的位置和大小。例如,对于移动设备,我们可以这样写: ```css @media (max-width: 768px) { .floating-window { ...

    可以移动的悬浮窗

    在游戏应用中,悬浮窗可以显示游戏辅助信息,如计时器或攻略提示。 总的来说,“可以移动的悬浮窗”是一个实用且灵活的界面设计,它结合了便捷性和可视化效果,为用户提供了高效的工作和娱乐环境。无论是移动应用...

Global site tag (gtag.js) - Google Analytics