jquery实现可拖拽弹出层特效


Posted in Javascript onJanuary 04, 2015

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

奉上源码:

<!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>
Javascript 相关文章推荐
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
jQuery中:image选择器用法实例
Jan 03 #Javascript
jQuery中:submit选择器用法实例
Jan 03 #Javascript
jQuery中:checkbox选择器用法实例
Jan 03 #Javascript
jQuery中:radio选择器用法实例
Jan 03 #Javascript
jQuery中:password选择器用法实例
Jan 03 #Javascript
jQuery中:text选择器用法实例
Jan 03 #Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 #Javascript
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
犀利的js 函数集合
2009/06/11 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
初一新生军训方案
2014/05/22 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
走进毛泽东观后感
2015/06/04 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python