可拖动的弹窗

pc端：

<!DOCTYPE html>        
<html lang="en">        
<head>        <meta charset="UTF-8">        <title>可拖动的弹窗</title>      <style type="text/css">  a{text-decoration: none; color: #eee; display: block;}.button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;}.callout_button{background:#FF5B5B;margin:0 auto; }.callout_button:hover{background: red;}.close_button{background:#363636;margin:0 auto;}.close_button:hover{background: black;}.mask{width: 100%;height: 100%;background:#000;position: absolute;top: 0px;left:0px;opacity: 0.4;z-index: 8000; display: none;-moz-user-select: none; -webkit-user-select: none;}.dialog{width: 380px;background:#fff; position: absolute;z-index: 9000;padding-bottom: 10px; display: none;-moz-user-select: none; -webkit-user-select: none;}.dialog_head{width: 100%;height:50px;background:#4B4B4B;text-align: center;line-height: 50px;color: #eee; cursor: move;}.dialog_content{width: 100%;height:300px;}    </style>       
</head>        
<body>  <div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div><div id="mask" class="mask"></div><div class="dialog" id="dialog"><div class="dialog_head" id="move_part">可拖拽部分</div><div class="dialog_content"></div><div class="button close_button" id="close"><a href="#">点我关闭对话框</a></div></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){var $dialog = $("#dialog");var $mask = $("#mask");//自动居中对话框function autoCenter(el){var bodyW = $(window).width();var bodyH = $(window).height();var elW = el.width();var elH = el.height();$dialog.css({"left":(bodyW-elW)/2 + 'px',"top":(bodyH-elH)/2 + 'px'});        };//点击弹出对话框$("#callout").click(function(){$dialog.css("display","block"); $mask.css("display","block");autoCenter($dialog); });            //禁止选中对话框内容if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;g('dialog').attachEvent('onselectstart', function() {return false;});}//声明需要用到的变量var mx = 0,my = 0;      //鼠标x、y轴坐标（相对于left，top）var dx = 0,dy = 0;      //对话框坐标（同上）var isDraging = false;      //不可拖动//鼠标按下$("#move_part").mousedown(function(e){e = e || window.event;mx = e.pageX;     //点击时鼠标X坐标my = e.pageY;     //点击时鼠标Y坐标dx = $dialog.offset().left;dy = $dialog.offset().top;isDraging = true;      //标记对话框可拖动                });//鼠标移动更新窗口位置$(document).mousemove(function(e){var e = e || window.event;var x = e.pageX;      //移动时鼠标X坐标var y = e.pageY;      //移动时鼠标Y坐标if(isDraging){        //判断对话框能否拖动var moveX = dx + x - mx;      //移动后对话框新的left值var moveY = dy + y - my;      //移动后对话框新的top值//设置拖动范围var pageW = $(window).width();var pageH = $(window).height();var dialogW = $dialog.width();var dialogH = $dialog.height();var maxX = pageW - dialogW;       //X轴可拖动最大值var maxY = pageH - dialogH;       //Y轴可拖动最大值moveX = Math.min(Math.max(0,moveX),maxX);     //X轴可拖动范围moveY = Math.min(Math.max(0,moveY),maxY);     //Y轴可拖动范围//重新设置对话框的left、top$dialog.css({"left":moveX + 'px',"top":moveY + 'px'});};});//鼠标离开$("#move_part").mouseup(function(){isDraging = false;});//点击关闭对话框$("#close").click(function(){$dialog.css("display","none");$mask.css("display","none");});//窗口大小改变时，对话框始终居中window.onresize = function(){autoCenter($dialog);};});</script>  
</body>        
</html>

移动端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><title>div块跟随手指拖动</title>
</head>
<body><div id="id"></div><style type="text/css">div{width: 200px;height: 200px;background: #ccc;position: absolute;left: 0px;top: 100px;}</style><script type="text/javascript">var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;document.getElementById("id").addEventListener("touchstart",function(e){_x_start=e.touches[0].pageX;_y_start=e.touches[0].pageY;// console.log("start",_x_start)left_start=$("#id").css("left");top_start=$("#id").css("top");})document.getElementById("id").addEventListener("touchmove",function(e){_x_move=e.touches[0].pageX;_y_move=e.touches[0].pageY;// console.log("move",_x_move)$("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px");$("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px");console.log(parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start));})document.getElementById("id").addEventListener("touchend",function(e){var _x_end=e.changedTouches[0].pageX;var _y_end=e.changedTouches[0].pageY;// console.log("end",_x_end)})//阻止浏览器下拉事件$('body').on('touchmove', function (event) {event.preventDefault();});// or// document.addEventListener('touchmove', function(e){e.preventDefault()}, false);</script>
</body>
</html>


转载于:https://www.cnblogs.com/xutongbao/p/9924904.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/369844.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

向量外积_解析几何 -向量

向量外积_解析几何 -向量

目录1.向量2.内积3.外积4.混合积5.双重外积6.关系式正文1.向量vector 引入vector O规定O没有确切的方向&#xff0c;即与任何向量不仅平行&#xff0c;而且垂直。申明&#xff1a;本文章的向量为自由向量&#xff0c;即始点不固定的向量&#xff0c;它可以任意的平行移动&#…
阅读更多...
HTML5 参数传递

HTML5 参数传递

页面显示效果&#xff0c;如下图&#xff1a; 主页面代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><br><br><a href"jssendValue.html?i…
阅读更多...
双向@OneToOne主键关联

双向@OneToOne主键关联

现在该继续有关Hibernate的文章了。 最后一个致力于单向OneToOne关联 。 因此&#xff0c;今天我将向您展示如何获取双向OneTonOne主键关联 。 本教程中基于前一篇文章的示例。 让我们开始吧。 我将使用以前创建的相同表。 为了建立双向一对一关联&#xff0c;我需要更新两个P…
阅读更多...
计量经济学建模_一分钟看完计量经济学

计量经济学建模_一分钟看完计量经济学

建模是计量的灵魂&#xff0c;所以就从建模开始。一、建模步骤建模步骤&#xff1a;A&#xff0c;理论模型的设计: a&#xff0c;选择变量b&#xff0c;确定变量关系c&#xff0c;拟定参数范围B&#xff0c;样本数据的收集: a&#xff0c;数据的类型b&#xff0c;数据的质量C&a…
阅读更多...
如何将视频设置为网页背景

如何将视频设置为网页背景

有时候为一个网页添加一个动画效果的背景&#xff0c;会让网页增加一定的韵味&#xff0c;让网页看起来与众不同。 第一步&#xff1a;准备工作 工欲善其事必先利其器&#xff0c;我们首先需要准备一个视频 第二步&#xff1a;html中引入视频 这里我们需要用到了video/标签&…
阅读更多...
python通过代理（ssh tunnel）连接MongoDB

python通过代理（ssh tunnel）连接MongoDB

1、python 怎么通过 ssh tunnel 连接 MongoDB 在Python中&#xff0c;您可以使用sshtunnel库创建一个SSH隧道&#xff0c;并结合使用pymongo库来连接MongoDB数据库。首先&#xff0c;确保已经安装了这两个库&#xff0c;如果没有&#xff0c;可以通过pip安装它们&#xff1a; …
阅读更多...
nginx日志配置指令详解

nginx日志配置指令详解

nginx日志配置指令详解 日志对于统计排错来说非常有利的。本文总结了nginx日志相关的配置如access_log、log_format、open_log_file_cache、log_not_found、log_subrequest、rewrite_log、error_log。 nginx有一个非常灵活的日志记录模式。每个级别的配置可以有各自独立的访问日…
阅读更多...
轻量级Web应用程序：PrimeFaces（JSF）+ Guice + MyBatis（第1部分）

轻量级Web应用程序：PrimeFaces（JSF）+ Guice + MyBatis（第1部分）

最近&#xff0c;我的朋友问我如何构建轻量级的Java Web应用程序。 许多Java Web开发人员会选择Spring和Hibernate来构建传统的Web应用程序。 但是&#xff0c;它可能不够轻巧。 我建议他尝试使用Guice和MyBatis构建应用程序框架。 尽管Spring比Guice功能更丰富&#xff0c;但我…
阅读更多...
haml入门

haml入门

1.什么是Haml Haml是HTML abstraction markup language&#xff0c;遵循的原则是标记应该是美的。Haml能够加速和简化模版&#xff0c;长处是简洁、可读、高效。 2.erbm模板和haml模板对照 .erb模板代码&#xff1a; <section class”container”><h1><% post.t…
阅读更多...
制图折断线_【机械制图】机械设计中的尺寸标注，看懂复杂机械图纸！

制图折断线_【机械制图】机械设计中的尺寸标注，看懂复杂机械图纸！

专注于机械行业、专业、职业信息分享服务于制造业百万工程师推荐阅读【机械制图】画图这么久&#xff0c;线型都没搞懂&#xff1f;【机械制图】机械图纸知识解析&#xff0c;这个总结溜溜的【机械制图】机械图纸尺寸标注规则&#xff0c;通过动图复习一下&#xff01;知名机械…
阅读更多...
CCS3的过渡、变换、动画以及响应式布局、弹性布局

CCS3的过渡、变换、动画以及响应式布局、弹性布局

CSS3 过渡 、变换、动画 在没有CSS3之前&#xff0c;如果页面上需要一些动画效果&#xff0c;要么你自己编写 JavaScript&#xff0c;要么使用 JavaScript 框架(如 jQuery)来提高效率。 但是CSS3出来之后&#xff0c;有能力做一些如平滑过渡(比如在鼠标悬停时)和在屏幕上移动元…
阅读更多...
Wordcounter，使用Lambdas和Fork / Join计算Java中的单词数

Wordcounter，使用Lambdas和Fork / Join计算Java中的单词数

这些天来&#xff0c;我发布了Wordcounter &#xff0c;这是一个Java库和命令行实用程序&#xff0c;用于对文本文件中的单词进行计数并对单词计数进行分析&#xff0c;从而大量使用了功能编程结构和并行计算方法。 这是我在“令人讨厌的快速问答”大赛第四个条目SAP &#xff…
阅读更多...
BZOJ2659: [Beijing wc2012]算不出的算式

BZOJ2659: [Beijing wc2012]算不出的算式

2659: [Beijing wc2012]算不出的算式 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 1489 Solved: 891[Submit][Status][Discuss]Description 算不出的算式 背景&#xff1a; 曾经有一个老掉牙的游戏放在我面前&#xff0c;我没有珍惜。直到这个游戏停产才追悔莫及。人世间…
阅读更多...
Android Studio报Error:Execution failed for task #39;:Companion:preDexDebug#39;.

Android Studio报Error:Execution failed for task #39;:Companion:preDexDebug#39;.

错误例如以下&#xff1a; Error:Execution failed for task :Companion:preDexDebug. > com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process command C:\Program Files\Java\jdk1.8.0_40\bin\java.exe finished with n…
阅读更多...
go 修改结构体方法_「GCTT 出品」Go 系列教程——26. 结构体取代类

go 修改结构体方法_「GCTT 出品」Go 系列教程——26. 结构体取代类

Go语言中文网&#xff0c;致力于每日分享编码、开源等知识&#xff0c;欢迎关注我&#xff0c;会有意想不到的收获&#xff01;Go 支持面向对象吗&#xff1f;Go 并不是完全面向对象的编程语言。Go 官网的 FAQ 回答了 Go 是否是面向对象语言&#xff0c;摘录如下。可以说是&…
阅读更多...
WindowsLinux常用命令笔记

WindowsLinux常用命令笔记

目录linux windows Linux: 1.查找文件 find / -name filename.txt 根据名称查找/目录下的filename.txt文件。 find . -name "*.xml" 递归查找所有的xml文件 find . -name "*.xml" |xargs grep "hello world" 递归查找所有文件内容中包含hello w…
阅读更多...
button 和input 的区别及在表单form中的用法

button 和input 的区别及在表单form中的用法

先说一下button 和input的定义&#xff1a; <button> 标签定义的是一个按钮 1、在 <button> 元素内部&#xff0c;您可以放置任何内容&#xff0c;比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处&#xff1b; 2、 <button> …
阅读更多...
走向REST：在Spring和JAX-RS（Apache CXF）中嵌入Jetty

走向REST：在Spring和JAX-RS（Apache CXF）中嵌入Jetty

对于服务器核心Java开发人员而言&#xff0c;向世界“展示”的唯一方法是使用API​​。 今天的帖子都是关于JAX-RS的 &#xff1a;使用Java编写和公开RESTful服务。 但是&#xff0c;我们不会使用涉及应用程序服务器&#xff0c;WAR打包以及诸如此类的传统的重量级方法来做到这…
阅读更多...
分组后分页_SQL(约束、视图、分页、序列、索引、同义词、创建用户,为用户授权、执行计划的使用 数据的导入导出)...

分组后分页_SQL(约束、视图、分页、序列、索引、同义词、创建用户,为用户授权、执行计划的使用 数据的导入导出)...

学习主题&#xff1a;SQL学习目标&#xff1a;掌握约束掌握视图修改表名与删除表删除表中的列语句的语法结构是什么&#xff1f;答&#xff1a;delete 表名from table where ;删除表中的列语句的语法结构是什么&#xff1f;答&#xff1a;delete 表名from table where ;截断表的…
阅读更多...
第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息...

第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息...

第三百三十四节&#xff0c;web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻&#xff0c;爬取Ajax动态生成的信息 crapy爬取百度新闻&#xff0c;爬取Ajax动态生成的信息&#xff0c;抓取百度新闻首页的新闻rul地址 有多网站&#xff0c;当你浏览器访问时看到的信息&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023