创建可移动的悬浮DIV

最新推荐文章于 2021-01-13 21:42:10 发布
最新推荐文章于 2021-01-13 21:42:10 发布
阅读量1.2k 收藏
点赞数
分类专栏： asp.net js 文章标签： div function class null html 

HTML代码如下：

<html>
<head>
<SCRIPT>
   var divObj=null;
   var pX;
   var pY;
   document.onmousemove = divMove;
   document.onmouseup = divUp;
  
   function moveObj(obj){
    divObj=document.all(obj);
    pX = divObj.style.pixelLeft-event.x;
    pY = divObj.style.pixelTop-event.y;
   } 
   function divMove(){
   if(divObj){
      divObj.style.left = pX+event.x;
      divObj.style.top = pY+event.y;
      event.returnValue = false;
   }
   }
   function divUp(){
   if(divObj){
      divObj=null;
   }
   }
</SCRIPT>
<STYLE>
   .divLayer {
    BORDER-RIGHT: #711200 1px solid;
    PADDING-RIGHT: 1px;
    BORDER-TOP: white 1px solid;
    PADDING-LEFT: 1px;
    FONT-SIZE: 9pt;
    PADDING-BOTTOM: 1px;
    BORDER-LEFT: white 1px solid;
    COLOR: #ff0000;
    PADDING-TOP: 1px;
    BORDER-BOTTOM: #711200 1px solid;
    FONT-FAMILY: Tahoma;
    BACKGROUND-COLOR: #eadfd0;
    LEFT: expression(( document . body . clientWidth-80)/ 2 );
    WIDTH: 100px;
    POSITION: absolute;;
    TOP: expression(( document . body . clientHeight-120)/ 2 );
    HEIGHT: 120px
   }
   .title {
    BORDER-RIGHT: #ffffff 1px solid;
    BORDER-TOP: #711200 1px solid;
    FONT-SIZE: 9pt;
    BORDER-LEFT: #711200 1px solid;
    CURSOR: hand;
    COLOR: #ffffff;
    BORDER-BOTTOM: #ffffff 1px solid;
    FONT-FAMILY: Tahoma;
    BACKGROUND-COLOR: #336699
   }
</STYLE>
<title>Moving DIV</title>
</head>
<body>
   <DIV class="divLayer" id="div1" οnmοusedοwn="moveObj('div1')">
   <DIV class="title">我的博客</DIV>
   <DIV style="PADDING-LEFT: 5pt"><A href="http://hi.baidu.com/addward_li"target=_blank>我的博客</A></DIV>
   </DIV>
</body>
</html>


wzq6511
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动DIV悬浮框
weixin_39482360的博客
10-28 948
1、首先添加CSS样式 .ui-dialog{ width: 450px;height: 180px; z-index: 9000; border: 1px solid #D5D5D5;background: #fff; overflow-y: auto; } ...
纯js实现可拖拽和点击的悬浮球
最新发布
04-01
在JavaScript编程中，创建一个可拖拽和点击的悬浮球是一项常见的交互设计任务。这个功能主要应用于各种网页应用，如在线聊天工具、控制面板或游戏等。本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们...
可拖动的悬浮div，兼容手指触摸和鼠标点击
gxk1992的博客
01-29 3178
html> head> meta charset="UTF-8"> title>适配移动端的拖动效果title> style> /* #div1{ height: 1000px; }*/ #div2{ position: absolute; top:0;
浮动的div随着滚轮滑动而动
lieri111的专栏
03-28 3142
 var advInitTop=0;function move(){ var adv = document.getElementById("advLayer"); adv.style.position = "absolute"; adv.style.top = advInitTop + document.body.scrollTop;} window.
可移动、可关闭的div浮动层
weixin_34281477的博客
02-27 248
<html> <head> <title>可移动、可关闭的div浮动层</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor=#FFFFFF...
div层位于右侧并悬浮随窗口移动，相对固定
ufryyfdf的博客
11-12 923
div层位于右侧并悬浮随窗口移动，相对固定
vuejs移动端实现div拖拽移动
12-12
在Vue.js移动端开发中，实现一个可拖动的div元素是一项常见的需求，尤其适用于创建类似iPhone悬浮窗口的效果。为了实现这个功能，我们需要了解并利用触摸事件（touch events）以及JavaScript的相关知识。 首先，...
vue实现移动端悬浮窗效果
10-17
悬浮窗口的`div`需要添加一些特殊的属性，如`v-if`用于控制显示与隐藏，以及事件监听器`@mousedown`、`@touchstart`、`@mousemove`、`@touchmove`、`@mouseup`和`@touchend`，分别对应鼠标和触摸的开始、移动、结束...
Javascript实现苹果悬浮虚拟按钮
10-22
接下来，我们创建一个div元素作为悬浮按钮的主体，设置其ID为"drager"。初始位置可以通过调整`style.top`和`style.left`属性来设置。同时，内部嵌套一个div元素，用于增加层次感和视觉效果。 为了让这个悬浮按钮...
jquery 可拖动浮动DIV ，可固定DIV
03-14
DIV可固定到页面的固定位置，不随页面的滚动而变化，还可以拖动DIV重新固定位置
基于bootstrap和jquery的可拖拽移动div，可预览的页面生成器
12-19
用于页面生成，自带轮播、切换等效果，基于bootstrap和jquery，页面可预览编辑
动态创建可移动可改变大小的DIV，挺好用的。
07-21
动态创建可移动可改变大小的DIV，挺好用的。
DIV可移动布局
08-15
实现类似QQ空间，拖动DIV实现页面的灵活布局
一个悬浮的DIV，实现鼠标拖动等功能
rainVSjava的专栏
05-24 1264
_xWin //可以打包为js文件; var x0=0,y0=0,x1=0,y1=0; var offx=6,offy=6; var moveable=false; var hover='orange',normal='slategray';//color; var index=10000;//z-index; var xx; //开始拖动; function start
拖动浮层（div等任何标签）
csmzl的博客
10-13 1268
拖动浮层（div等任何标签）  之前项目做到一个弹出层需要一个拖动功能，上网上查了资料，发现很多方法，但是感觉都很繁琐，有的甚至没看懂。看了几个方法后发现基本上都是使用mousedown、mousemove和mouseup这三个函数来写的，然后就自己写了个移动div的方法。  先用mousedown来判断是否要开启移动，然后通过mousemove来获得移动的距离，实现移动；最后通过mouseup事件
js实现在页面内可拖动div（悬浮按钮可拖动改变位置）
liushuanglian的博客
04-29 3858
需求 这次这个网页是要在手机端浏览的，那么对于返回上一页时不那么友好，于是得在不是首页的地方加上返回首页的悬浮按钮，点击即可返回首页，但在有的页面上这个按钮有时会挡住关键的数据信息，于是想把这个按钮做成悬浮的可以拖动的按钮，以便于看到你想看到的信息。 思路 在触摸开始的时候记录他的坐标，在触摸中记录与开始的差值 代码如下 window.onload = function() { v...
css通过鼠标悬浮实现元素移动
04-23 1078
通过鼠标悬浮实现让元素在九宫格内移动，最终回到原点。 在本案例中使用了过渡+定位+opacity三个主要的知识点。 当鼠标悬浮在九宫格之上的时候，就让元素进行位置切换，但是仅仅通过定位的移动并不能一次性进行多个方向的位移，所以采用了过渡延迟+元素隐藏这样的一个小技巧，从而实现在视觉上的一个欺骗。 下面是代码分享： <!DOCTYPE html> <html lang="...
原生js 实现移动端 元素页面拖拽
qq_41851047的博客
08-19 926
html <div id="qmkf" > <div> 拖动</div> </div> css #qmkf { border-radius: 50%; position: fixed; z-index: 99; width: 39px; ...
h5可拖动悬浮按钮_js实现悬浮窗效果(支持拖动)
weixin_39935571的博客
01-13 2087
经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写！效果图：代码如下：js悬浮窗代码(支持拖动)*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* KeFuDiv */.KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:...
vue div悬浮固定
05-25
可以使用CSS中的position属性来实现vue div悬浮固定。具体实现方法如下： 1. 首先，在需要悬浮固定的div标签中添加一个class类名，例如"fixedDiv"。 2. 在CSS文件中，为这个类名添加如下样式： ```css .fixedDiv{ position: fixed; top: 50px; /* 悬浮的距离 */ left: 0; right: 0; } ``` 其中，position: fixed; 表示固定定位，top: 50px; 表示距离顶部50像素，left: 0; 和 right: 0; 表示悬浮div的左右两侧距离屏幕边缘为0。 3. 在vue组件中，将需要悬浮固定的div标签添加上这个class类名，例如： ```html <template> <div class="wrapper"> <div class="fixedDiv"> // 悬浮固定的内容 </div> // 其他内容 </div> </template> <script> export default { // 组件代码 } </script> <style scoped> .fixedDiv{ position: fixed; top: 50px; /* 悬浮的距离 */ left: 0; right: 0; } </style> ``` 这样就可以实现vue div悬浮固定了。需要注意的是，如果悬浮的内容高度超过了屏幕高度，需要添加滚动条样式。可以在CSS中为悬浮div的父元素添加如下样式： ```css .wrapper{ height: 100vh; /* 屏幕高度 */ overflow-y: scroll; /* 竖向滚动条 */ } ``` 这样就可以实现悬浮div内容超出屏幕高度时，可以通过滚动条滚动的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值