脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现可拖拽弹出层特效

jquery实现可拖拽弹出层特效

 更新时间：2015年01月04日 08:56:43   投稿：hebedich  
这篇文章主要介绍了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实现文本显示一段时间后隐藏的方法分析

    这篇文章主要介绍了jQuery实现文本显示一段时间后隐藏的方法,结合实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-06-06
  • jQuery最佳实践完整篇

    jQuery最佳实践完整篇

    那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。
    2011-08-08
  • 浅析jQuery Ajax通用js封装

    浅析jQuery Ajax通用js封装

    这篇文章主要介绍了jQuery Ajax通用js封装的实例代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • Jquery插件 easyUI属性汇总

    Jquery插件 easyUI属性汇总

    找了个时间看了下EasyUI插件，对它的插件感觉是很舒服，特地把Easy UI的大部分功能属性做了一下汇总。使用easyUI的朋友可以收藏下。
    2011-01-01
  • 仿百度的关键词匹配搜索示例

    仿百度的关键词匹配搜索示例

    关键词匹配搜索想必大家一定会想到百度，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-09-09
  • jQuery实现拼图小游戏(实例讲解)

    jQuery实现拼图小游戏(实例讲解)

    下面小编就为大家带来一篇jQuery实现拼图小游戏(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery比较简洁的软键盘特效实现方法

    jquery比较简洁的软键盘特效实现方法

    这篇文章主要介绍了jquery比较简洁的软键盘特效实现方法,实例分析了jQuery实现软键盘特效的具体方法与功能效果,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jQuery快速上手：写jQuery与直接写JS的区别详细解析

    jQuery快速上手：写jQuery与直接写JS的区别详细解析

    jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下所示。需要的朋友可以过来参考下
    2013-08-08
  • jquery.Jwin.js 基于jquery的弹出层插件代码

    jquery.Jwin.js 基于jquery的弹出层插件代码

    测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明
    2012-05-05
  • JQuery循环滚动图片代码

    JQuery循环滚动图片代码

    每次滚动的长度不要固定死，可以直接获取图片宽度作为滚动的长度。这样当你的网站有很多地方需要这个效果的时候一个函数就可以搞定了
    2011-12-12

最新评论