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 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
Less 安装及基本用法
May 05 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php mysql索引问题
2008/06/07 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
CI框架常用函数封装实例
2016/11/21 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
详解Python命令行解析工具Argparse
2016/04/20 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python3实现随机数
2018/06/25 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python怎么调用自己的函数
2020/07/01 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
会计员岗位职责
2014/03/15 职场文书
优质服务活动实施方案
2014/05/02 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
宿舍管理制度范本
2015/08/07 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
SQL Server Agent 服务无法启动
2022/04/20 SQL Server