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 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 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
php中随机显示图片的函数代码
2011/06/23 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
限制文本字节数js代码
2007/03/06 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python实现学生信息管理系统
2020/04/05 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
一分钟演讲稿
2014/04/30 职场文书
学风建设演讲稿
2014/09/12 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
群众路线个人整改措施
2014/10/24 职场文书
七年级地理教学计划
2015/01/22 职场文书
委托书格式范文
2015/01/28 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技