个人中心
gpt4 book ai didi

jquery实现可拖拽弹出层特效

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jquery实现可拖拽弹出层特效由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 。

奉上源码:

  。

复制代码 代码如下:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } .dragBox { width: 400px; height: 200px; position: absolute; top: 40%; left: 40%; background: #e8e8e8; z-index: 8001; } .dragBox > div { height: 30px; cursor: move; background: #00ff21; position: relative; } 。

  。

.ui-mask { width: 100%; height: 100%; background: #000; position: absolute; top: 0px; z-index: 8000; opacity: 0.4; filter: Alpha(opacity=40); } </style> <script src="framework/base/jquery-1.8.3.min.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> $(function () { var mouseOffx = 0; var mouseOffy = 0; var isDrag = false; $(".dragBox div:eq(0)").unbind(".click").on("mousedown", function (ev) { mouseOffx = ev.clientX - $(".dragBox div:eq(0)").offset().left; mouseOffy = ev.clientY - $(".dragBox div:eq(0)").offset().top; isDrag = true; }) $(document).unbind(".click").on("mousemove", function (ev) { var mourseX = ev.clientX, mourseY = ev.clientY; var moveX = 0, moveY = 0; if (isDrag === true) { moveX = mourseX - mouseOffx; moveY = mourseY - mouseOffy; var maxX = $(window).outerWidth(false) - $(".dragBox").outerWidth(false); var maxY = $(window).outerHeight(false) - $(".dragBox").outerHeight(false); moveX = Math.min(maxX, Math.max(0, moveX)); moveY = Math.min(maxY, Math.max(0, moveY)); $(".dragBox").css({ "left": moveX, "top": moveY }); } }); $(document).unbind(".click").on("mouseup", function () { isDrag = false; }); }); </script> </head> <body> test <div class="ui-mask" id="mask" onselectstart="return false"></div> <div class="dragBox"> <div> </div> </div> </body> </html> 。

最后此篇关于jquery实现可拖拽弹出层特效的文章就讲到这里了,如果你想了解更多关于jquery实现可拖拽弹出层特效的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 关于vs strcpy_s（）和strcat_s()用法探究
文章推荐： Atom安装配置C/C++详细教程
文章推荐： VSCode搭建C/C++编译环境的详细教程
文章推荐： jQuery中:image选择器用法实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com