这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享。

首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>

首先做点css,效果如下

然后隐藏div,添加jquery

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>

到此,点击显示就完成了。下面来完成关闭。给关闭span添加了一个鼠标手形的样式。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>

div的关闭

下面我们来完成另一个任务,就是拖拽

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
// alert(111);
$('#btn a').click(function() {
// alert(222);
$('#box').show();
});
$('span').click(function() {
// alert(333);
$('#box').hide();
}); $('#hd').mousedown(function(event) {
// alert(444);
var isMove = true;
var abs_x = event.pageX - $('div#box').offset().left;
var abs_y = event.pageY - $('div#box').offset().top;
// alert(abs_x);
// alert(event.pageX);
$(document).mousemove(function(event) {
// alert(555);
if (isMove) {
var obj = $('div#box');
// alert(obj);
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
};
}).mouseup(function(event) {
isMove = false;
});;
});
});
</script> <style type="text/css">
*{margin: 0;padding: 0;}
#box{border: 5px solid #2e2e2e;width:320px;height: 240px;background-color: #CC9900;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
display: none;
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#hd{background-color: #666666;font-size: 14px;padding: 4px;cursor: move;}
span{float: right;padding-right: 4px;cursor: pointer;}
#cnt{padding: 5px;}
</style>
</head>
<body>
<div id="btn">
<a href="#">点我弹框</a>
</div>
<div id="box">
<div id="hd">
<span>关闭</span><h3>这里是标题</h3>
</div>
<div id="cnt">
这里是一些文字
</div>
</div>
</body>
</html>

拖拽

虽然过程有些曲折,但终于还是完成了。

    left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值)
top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始位置y值)

jQuery 学习笔记3 点击弹出一个div并允许拖拽移动的更多相关文章

  1. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. jQuery 学习笔记2 点击时弹出一个对话框

    上次学习的是页面加载完成后弹出一个警告框,这里我们改为当用户点击后弹出一个警告框. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  4. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  5. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...

  6. Jquery学习之路(三) 实现弹出层插件

    弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...

  7. elementUI 弹出框添加可自定义拖拽和拉伸功能,并处理边界问题

    开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...

  8. jQuery第一课 加载页面弹出一个对话框

    <script type="text/javascript"> $(document).ready(function(){ alert("欢迎收看:" ...

  9. 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失

    \ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...

随机推荐

  1. Tensorflow 相关概念

    一.概述 人工智能:artificial intelligence 权重: weights 偏差:biases 图中包含输入( input).塑形( reshape). Relu 层( Relulay ...

  2. 【Struts2】Struts2框架的搭建

    1,Struts2简介 struts1和struts2都是由Apache组织发布的,但是比较有趣的是struts2和struts1并没有“血缘关系”.在Apache发布struts1之后,当时是还是非 ...

  3. 【MySQL】MySQL之MySQL常用的函数方法

    MySQL常用函数 本篇主要总结了一些在使用MySQL数据库中常用的函数,本篇大部分都是以实例作为讲解,如果有什么建议或者意见欢迎前来打扰. limit Select * from table ord ...

  4. 【struts2】Action的生命周期

    Struts2的Action的生命周期是:Struts2为每个请求都重新初始化一个Action的实例.可以稍微改造一下代码来验证一下. 给HelloWorldAction加上一个public无参的构造 ...

  5. Spring-Boot服务注册与发现

    关于Eureka服务注册与发现的示例可以参见:http://blog.didispace.com/springcloud1/ 服务注册管理器原理如下图所示: 1.建立eureka服务器 @Enable ...

  6. 黑客公布2012年最弱智密码Top25(转)

    尽管弱密码对安全性的危害大家都知道,但是仍然有很多网民使用超弱密码.日前,黑客公布了一份密码文档,列出了今年最弱智密码. 根据 SplashData 公布的“年度最弱智密码 Top25”,和去年一样, ...

  7. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  8. angular之service、factory预provider区别

    昨晚项目组做了angular分享,刚好有讨论到这个问题.虽然许久不做前端开发,但是兴趣所致.就查阅了下资料,以便后续需要使用 自己的理解:service是new出来的,factory是直接使用就能获得 ...

  9. python groupby 函数 as_index

    在官方网站中对as_index有以下介绍: as_index : boolean, default True For aggregated output, return object with gro ...

  10. Python 爬虫 不得不说的 清洗

    今天就聊聊爬虫的清洗,下载网页只是最简单的一个步骤,最让人头疼的是数据的清洗. 为什么要这样说呢,因为爬虫首先是获得数据,清洗是把非结构化的数据转换成结果化的数据,这个时候是最考验人的时候. 如果是国 ...